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