封装主题思想？以及如何通过sass封装主题

html[data-theme="light"] {
  background-color: #fff;
  color: red;
}
html[data-theme="dark"]{
    background-color: #000;
    color: red;
}

我们一般想要改变主题背景的时候会在html上加这种Attribute属性来控制整个html文档的主题背景

然而上述这样根据不同的主题去编写不同的html[data-theme]，不言而喻是非常困难的，因此我的想法是通过sass来进行转换，首先我们可以定义一些主题通过sass的方式:

$theme: (

light: (

bgColor: #fff,

textColor: #000,

),

dark: (

bgColor: #000,

textColor: #fff,

),

);

接着我们可以定义一个混合@mixin，去循环遍历这个主题，并且给html对应的Attribute赋值

@mixin useTheme{
@each $key,$value in $theme{
    html[data-theme='#{$key}']{
        background:red;
           color:#fff;
    }
}
}

但是我们这个时候会发现html中的内容是写死的，那按照正常来说的思想就是我们应该是通过别的组件写样式的时候传入的才能行，这个时候我们可以将原来写死的内容通过@content的方式改写，这也就有点像vue中插槽里的内容了。

接着我们会发现include里的内容也是写死的，按理来说他应该获取的是当前theme主题里对应的颜色,这个时候我们可以通过编写一个函数的方式去解决,函数的入参也就是这个样式的名字:

@function getVar($parpName) {

$themeMap: map-get($theme, $curTheme);

@return map-get($themeMap, $parpName);

}

通过两次map-get就能返回对应主题的颜色，然后再将函数写入到useTheme里需要的元素上，也就成功了

但是我们会发现图中多了一个$curTheme,这玩意其实就是全局变量，我们为了记录当前主题颜色而设置的一个变量，当主题颜色发生改变的时候我就能确定当前所处的主题了，这个时候需要用到！global的方式，来确定当前变量为全局变量否则会出现作用域的问题。然后还有一些像&的运用，可以确定当前的样式给到对应的类名，也是非常的细节。总的来说大致思路就是这样。