乾貨：基於scss的主題配色解決方案

現實困境

公司要開發一個功能模塊，要求在不一樣場景下面，展現不一樣的主題色，翻閱了一些材料，最終決定用scss來處理這個主題功能；

基礎知識

須要知道scss的基本語法，包括：變量，數組，函數，字符串拼接等基礎api，具體的查看文檔。

配置主題的思路

這邊提供的解決方案是，針對一個功能模塊，會打包出多套主題，會根據最外層的class來決定主題的樣式。

.theme-1{
    p{
        color:red;
    }
}
.theme-2{
    p{
        color:green;
    }
}
.theme-2{
    p{
        color:blue;
    }
}
複製代碼

如上訴代碼，對於標籤p，在theme-1,theme-2,theme-3下展現的顏色不一樣的顏色。這樣，當外層配置不一樣的class，就實現了主題色的配置。

配合sass實現功能

1.定義主題的數組

$themeArr: (
    "theme1": (
        "color": green,
        "background": red,
    ),
    "theme2": (
        "color": orange,
        "background": blue,
    ),
    "theme3": (
        "color": orange,
        "background": blue,
    ),
);
複製代碼

2.**定義處理主題的方法

@mixin setThemes($keyStyle:"color",$themes:$themeArr) {
    @each $theme,$map in $themes {
        .body-theme-#{$theme} & {
            #{$keyStyle}:map-get($map,$keyStyle);
        }
    }
}
複製代碼

解釋：此方法有兩個入參，第一個是傳入樣式的key，相似color,font-size,backgournd等（默認是color），第二個是主題的數組（默認是前面定義好的數組）。主題函數中，循環了主題數組，並根據數組的key，動態定義以了不一樣的主題class，而後根據函數傳參的$keyStyle，編譯出指定的樣式。ps:看不一樣語法的先看文檔

3.編譯之後的結果

假設有以下一段scss,咱們調用了setThemes方法來設置樣式

p{
    font-size: 20px;
    line-height: 20px;
    @include setThemes('color');
}
複製代碼

編譯之後會變成下圖的css:

從圖中咱們能夠看到， font-size, line-height沒有根據主題來配置，而根據主題函數生成的 color樣式，分別被放在了 .body-theme-theme1,.body-theme-theme2,.body-theme-theme3下，能夠根據不一樣的 class展現不一樣的顏色，從而實現主題的配置；

更進一步來看

p{
    font-size: 20px;
    line-height: 20px;
    @include setThemes('color');
    @include setThemes('background');
}
複製代碼

則會編譯出以下結果：

這樣的話，就會把 color,background看成主題來處理；是否是很帥?

4.升級

在原有的主題方法中加入一個@content,會有更加酷的效果；

@mixin setThemes($keyStyle:"color",$themes:$themeArr) {
    @each $theme,$map in $themes {
        .body-theme-#{$theme} & {
            #{$keyStyle}:map-get($map,$keyStyle);
            /**相比前面的方法，這裏多了這句話**/
            @content;
        }
    }
}
複製代碼

假設有以下一段scss,咱們調用了setThemes方法來設置樣式：

p{
    font-size: 20px;
    line-height: 20px;
    @include setThemes('color'){
        font-size: 30px;
    };
}

複製代碼

則會編譯出以下結果：

他會把執行方法後面 {}內的樣式，統一加到主題內；

5.實戰

說了這麼多，來看下實際項目中如何來使用吧！
假設咱們有以下一個頁面：

調用了三次 TestTheme,並傳入了不一樣的主題顏色； 而後引入的 b.scss內容以下:

**接下來，就是見證奇蹟的時刻了，來看下瀏覽器中的效果吧！

效果就如上圖所示，實現了主題的效果，是否是以爲帥氣高大上呢！

6.優缺點

優勢：這個沒啥好說的，就是解決了主題色的問題；
缺點：
1.打包之後，會多出不少的主題代碼，是打包後的css體積變大；
2.設置相關屬主題樣式的時候，不能用鍵值對的方式，而是要使用調用函數的方式，改變了原有的習慣方式（有很大的優化空間）；
3.全部的scss文件中，都得先引入這個設置主題顏色的方法；

有得必有失，這就須要開發者去考慮解決問題的時候帶來的負面影響是否在可接受範圍內了！

結論

文章總結了如何用SCSS去處理項目中的碰到的主題問題，固然我這邊只是提供了一套看似可行的解決方案，實際項目中確定仍是要根據項目的實際狀況作不一樣的調整，可也在此基礎上去優化功能。但願能給小夥伴帶來幫助，也但願有更好想法的小夥伴能夠給我留言！