干货：基于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去处理项目中的碰到的主题问题，当然我这边只是提供了一套看似可行的解决方案，实际项目中肯定还是要根据项目的实际情况做不同的调整，可也在此基础上去优化功能。希望能给小伙伴带来帮助，也希望有更好想法的小伙伴可以给我留言！