Vue中使用sass實現換膚功能

來源：懂視網責編：小采時間：2020-11-27 22:08:11

Vue中使用sass實現換膚功能

Vue中使用sass實現換膚功能:先給大家展示下效果圖：先給大家看一下目錄和主要文件：解釋一下主要文件： base.scss：一些通用樣式文件。 mixin.scss：定義mixin方法的文件。 varibale.scss：顏色，字體，背景的配置文件以下就拿封裝的head組件代碼來展示以下實現邏輯，現在

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue中使用sass實現換膚功能:先給大家展示下效果圖：先給大家看一下目錄和主要文件：解釋一下主要文件： base.scss：一些通用樣式文件。 mixin.scss：定義mixin方法的文件。 varibale.scss：顏色，字體，背景的配置文件以下就拿封裝的head組件代碼來展示以下實現邏輯，現在

先給大家展示下效果圖：

先給大家看一下目錄和主要文件：

解釋一下主要文件：

base.scss：一些通用樣式文件。

mixin.scss：定義mixin方法的文件。

varibale.scss：顏色，字體，背景的配置文件

以下就拿封裝的head組件代碼來展示以下實現邏輯，現在大家主要是來理解，不要著急，在文章最后會貼出三個主要文件的代碼的。

為什么會在 background:$background-color-theme; 地方標注錯誤？

如果之前用過sass的同學可能會知道，這樣雖然實現了css樣式變量化，但是后期沒有辦法作出靈活更改的。

所以需要把設置背景顏色封裝成一個mixin方法（包括字體大小，字體顏色，都需要進行封裝）

請看mixin.scss中的代碼：

主要原理：

通過設置html的attribute屬性在封裝的函數中進行判斷，進行相應的設置不同的顏色

css中 [ ] 可以識別到在html標簽上設置的屬性，所以在html上對應屬性發生變化時，就會執行相應的樣式，

這一步有點類似于平時給div添加一個.active屬性，css自動執行相應樣式。

更換主題時的具體操作：

下邊是主要文件完整的代碼

base.scss示例代碼：

@charset "utf-8";
$font_default_color:$font-color-shallow3;
$font_default_size:$font_medium_s;
*{
 margin:0;padding:0;box-sizing:border-box;color:$font_default_color;
 /*@include font-dpr($font_default_size);*/
}
a{text-decoration:none;color:$font_default_color;}
.sub-page { //routerView
 position: fixed;top: 0;bottom: 0;width: 100%;background:#fff;right: 0;left: 0;z-index: 5;
}
#content{width:100%;position:absolute;@include px2rem(top,88px);bottom:0;overflow-x:auto;}
.width{
 width:100%;
}
/*豎向居中*/
.table-cell{
 display:table-cell;vertical-align:middle;text-align:center;
}
.middle{
 vertical-align:middle;
}
/*彈性盒*/
.flex{
 display: inline-flex;display: -webkit-flex;display: flex;
}
/*彈性盒-子元素可豎向居中*/
.flex-middle{
 display :flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; justify-content:center ;
}
.tl{
 text-align:left;
}
.tc{
 text-align:center;
}
.tr{
 text-align:right;
}
.fl{
 float:left;
}
.fr{
 float:right;
}
.clear::after{
 /*原理： overflow!=visible ;display!=block;float!=none;position!=static||relative 都可為元素創建BFC；消除邊距重疊或者浮動產生的影響*/
 content:'';overflow:hidden;clear:both;
}

mixin.scss示例代碼：

@charset "utf-8";
@import "./variable";/*引入配置*/
@mixin font_size($size){/*通過該函數設置字體大小，后期方便統一管理；*/
 @include font-dpr($size);
}
@mixin font_color($color){/*通過該函數設置字體顏色，后期方便統一管理；*/
 color:$color;
 [data-theme="theme1"] & {
 color:$font-color-theme1;
 }
 [data-theme="theme2"] & {
 color:$font-color-theme2;
 }
 [data-theme="theme3"] & {
 color:$font-color-theme3;
 }
}
@mixin bg_color($color){/*通過該函數設置主題顏色，后期方便統一管理；*/
 background-color:$color;
 [data-theme="theme1"] & {
 background-color:$background-color-theme1;
 }
 [data-theme="theme2"] & {
 background-color:$background-color-theme2;
 }
 [data-theme="theme3"] & {
 background-color:$background-color-theme3;
 }
}
/*px轉rem*/
@mixin px2rem($property,$px,$px2:false,$px3:false,$px4:false){
 $rem:75px;/* 設計稿尺寸/10 */
 @if $px and $px2 and $px3 and $px4 {
 #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem ($px3 / $rem) + rem ($px4 / $rem) + rem;
 }
 @else if $px and $px2 {
 #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem;
 //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem ($px2 * 1.4 / $rem) + rem;}
 }
 @else{
 #{$property}: ($px / $rem) + rem!important;
 //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem;}
 }
}
/*根據dpr計算font-size*/
@mixin font-dpr($font-size){
 font-size: $font-size;
 //[data-model="pad"] & { font-size: $font-size * 1.4; }
 [data-dpr="2"] & { font-size: $font-size * 2;}
 [data-dpr="3"] & { font-size: $font-size * 3;}
}
/*彈性盒屬性*/
%flexbox{
 display: inline-flex;display: -webkit-flex;display: flex;
}
/*彈性盒比例*/
@mixin flex($num:1){
 -webkit-box-flex:$num;-moz-box-flex:$num;-webkit-flex:$num;-ms-flex:$num;flex:$num;
}
/*超行溢出顯示省略號*/
@mixin overflow($num:1,$fontSize:0,$lineHeight:1.5){
 display: -webkit-box;-webkit-line-clamp:$num; overflow: hidden;
 /*! autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
 @if $fontSize!=0 and $lineHeight{/*高度需要撐開*/
 line-height:$lineHeight;
 @if $lineHeight < 1.2 {
 line-height:1.2; /*最小需要1.2，否則在部分安卓機下第$num+1行會頂部漏出*/
 }
 height: $num * $fontSize * $lineHeight;
 [data-dpr="2"] & { height: $num * $fontSize * $lineHeight * 2!important;}
 [data-dpr="3"] & { height: $num * $fontSize * $lineHeight * 3!important;}
 }
}
//transition兼容寫法
@mixin transition($content:all .2s){
 -moz-transition: $content;
 -webkit-transition: $content;
 -o-transition: $content;
 transition: $content;
}
//transfrom兼容
@mixin translateX($num:-50%){
 -ms-transform: translateX($num);
 -moz-transform: translateX($num);
 -webkit-transform: translateX($num);
 -o-transform: translateX($num);
 transform: translateX($num);
}
@mixin translateY($num:-50%){
 -ms-transform: translateY($num);
 -moz-transform: translateY($num);
 -webkit-transform: translateY($num);
 -o-transform: translateY($num);
 transform: translateY($num);
}
@mixin rotate($deg:90deg){
 -ms-transform:rotate($deg);
 -moz-transform:rotate($deg);
 -webkit-transform:rotate($deg);
 -o-transform:rotate($deg);
 transform:rotate($deg);
}

variable.scss示例代碼：

//顏色定義規范
$background-color-theme: #3f8e4d;//背景主題顏色默認
$background-color-theme1: red;//背景主題顏色1
$background-color-theme2: #652BF5;//背景主題顏色2
$background-color-theme3: deepskyblue;//背景主題顏色3
$background-color-themesec: #edc148;//背景次要主題顏色
$font-color-theme : #3f8e4d;//字體主題顏色默認
$font-color-theme1 : red;//字體主題顏色1
$font-color-theme2 : #652BF5;//字體主題顏色2
$font-color-theme3 : deepskyblue;//字體主題顏色3
$font-color-themesec : #edc148;//字體次要主題顏色
$font-color-shallow0 : #000;
$font-color-shallow1 : #111;
$font-color-shallow2 : #222;
$font-color-shallow3 : #333;
$font-color-shallow4 : #444;
$font-color-shallow5 : #555;
$font-color-shallow6 : #666;
$font-color-shallow7 : #777;
$font-color-shallow8 : #888;
$font-color-shallow9 : #999;
$font-color-shallowdb : #dbdbdb;
//字體定義規范
$font_little_s:10px;
$font_little:12px;
$font_medium_s:14px;
$font_medium:16px;
$font_large_s:18px;
$font_large:20px;

mine.vue中更換主題時的操作代碼

<template>
 <div id="bookcaselist">
 <v-head :title="title" :showBack="showBack"></v-head>
 <div id="content">
 <p @click="changeTheme('theme1')"></p>
 <p @click="changeTheme('theme2')"></p>
 <p @click="changeTheme('theme3')"></p>
 </div>
 <v-foot :activeIndex="3"></v-foot>
 </div>
</template>
<script>
export default {
 name: 'mine',
 data () {
 return {
 title: '我的',
 showBack: false
 }
 },
 methods: {
 changeTheme (theme) {
 window.document.documentElement.setAttribute('data-theme', theme)
 }
 },
 components: {
 }
}
</script>
<style scoped="" lang="scss">
 p{
 @include px2rem(width,100px);
 @include px2rem(height,100px);
 @include px2rem(margin,20px);
 float:left;
 }
 p:first-child{
 background-color:red;
 }
 p:nth-child(2){
 background-color:#652BF5;
 }
 p:last-child{
 background-color:deepskyblue;
 }
</style>

其實過程和邏輯都比較簡單，大家理解一下，有不明白的地方在下方評論區評論，有錯誤的地方也歡迎大家指出，看到后我會回復

總結

以上所述是小編給大家介紹的Vue中使用sass實現換膚功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com