Scss換膚

項目中雖然沒有一鍵換膚的要求，但是產品要求后期能換主題。在開發組件中涉及到主題的地方，要提取一些公用的變量，不要直接寫死樣式值。但是如果只是定義一些變量的話，只是完成控制顏色等值的提取。后期切換的話需要把所有變量再寫一遍並注釋之前的。不是很優雅。

一、Scss部分

• 定義變量以及映射表

// 默認主題
$default-theme : (
  base-color: #ddd,
  border-color: #000
);
//紅色主題
$red-theme : (
  base-color: red,
  border-color: red
);
//定義映射集合
$themes: (
  default-theme: $default-theme,
  red-theme: $red-theme
);

• 定義方法,循環遍歷映射集合，生成對應樣式表

@mixin base-background(){
    @each $themename , $theme in $themes {
        [data-theme = '#{$themename}'] & {
            background: map-get($map: $theme, $key: base-color )
        }
    }
}

• 在組件中,引入公共文件，在要用到的地方使用定義好的mixin

@import 'theme.scss'
.block {
    width: 1000px;
    @include base-background();
}

• 編譯完成會生成如下代碼。可見對應主題下面的塊，會表現出對應的主題顏色。

  
  
   

  

  生成樣式

二、VUE部分

• scss部分已經生成了符合需求的樣式，剩下的就是要把自定義屬性data-theme掛在app上，然后定義切換主題邏輯。

擴展：

定義Mixins

通過@mixin加名稱的方式就可以定義一個Mixins模塊，在模塊內你可以添加任何你想重復使用的樣式。

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

你可以通過@include來調用具有相同名稱的mixin模塊。

.button-green {  
    @include button;  
    background-color: green;  
}

Map對象

　　如果說scss的list對應於JavaScript數組，那么scss的map就對應這個JavaScript對象直接量。

　　它是一種映射任何類型鍵值對（可以是任何類型，包括內嵌maps，不過不推薦這種內嵌方式）的數據結構。

　　代碼實例:

$map: ( 
  $key1: value1, 
  $key2: value2, 
  $key3: value3 
)

　　上面是scss中map的一個簡單代碼實例，再來看一下JavaScript對象直接量的結構:

let object= {
  webName:"babyli",
  age:19,
  address:"湖北省武漢市"
}

　　scss中的map語法結構

　　（1）.map名稱前要有一個$。

　　（2）.名稱后面是一個冒號。

　　（3）.冒號后面是小括號。

　　（4）.小括號中的數據是以key:value鍵值對的形式存在的。

　　（5）.鍵值對之間使用逗號分隔，最后一個后面無需逗號。

 

scss內置了七個用來專門操作map的函數:

　　（1）.map-get($map,$key)：根據給定key，返回map中對應的value。

　　（2）.map-merge($map1,$map2)：將兩個map合並成一個新的map。

　　（3）.map-remove($map,$key)：從map中刪除一個key，返回一個新map。

　　（4）.map-keys($map)：返回map中所有的key。

　　（5）.map-values($map)：返回map中所有的value。

　　（6）.map-has-key($map,$key)：根據給定key判斷map是否有對應value，有返回true，否則false。

　　（7）.keywords($args)：返回一個函數的參數，這個參數可以動態的設置key和value。