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

西瓜太郎醬發表於2020-03-04
CSS

現實困境

公司要開發一個功能模組，要求在不同場景下面，展示不同的主題色，翻閱了一些材料，最終決定用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:

乾貨：基於scss的主題配色解決方案
從圖中我們可以看到，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');
}
複製程式碼

則會編譯出如下結果：

乾貨：基於scss的主題配色解決方案
這樣的話，就會把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;
    };
}

複製程式碼

則會編譯出如下結果：

乾貨：基於scss的主題配色解決方案
他會把執行方法後面{}內的樣式，統一加到主題內；

5.實戰

說了這麼多，來看下實際專案中如何來使用吧！
假設我們有如下一個頁面：

乾貨：基於scss的主題配色解決方案
呼叫了三次TestTheme,並傳入了不同的主題顏色； 然後引入的b.scss內容如下:
乾貨：基於scss的主題配色解決方案
**接下來，就是見證奇蹟的時刻了，來看下瀏覽器中的效果吧！

乾貨：基於scss的主題配色解決方案
效果就如上圖所示，實現了主題的效果，是不是覺得帥氣高大上呢！

6.優缺點

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

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

結論

文章總結了如何用SCSS去處理專案中的碰到的主題問題，當然我這邊只是提供了一套看似可行的解決方案，實際專案中肯定還是要根據專案的實際情況做不同的調整，可也在此基礎上去優化功能。希望能給小夥伴帶來幫助，也希望有更好想法的小夥伴可以給我留言！

相關文章