js修改scss变量,动态修改scss变量

 需求，一个页面白天打开是一个风格，晚上打开切换为另一种风格。

之前用的都是写一个list数组，然后数组里面放一些颜色，然后再定义一个下标，通过nth(数组,下标)去拿，例如

$index:1 !default;//默认变量为1
$backColorList: #409EFF,red,black;
$headBackColor: nth($backColorList , $index);//这样就$headBackColor的背景色就是#409EFF

但是这样写我上网搜了一下，发现没有让他可以成为动态的方法，没又看到可以通过js来改变这个下标的方法。所以又去看了其他大神的文章，有大神分享了出来。

分为三个文件。整体思路是通过声明皮肤文件，通过@mixin解析结果，通过@include在页面中调用；

皮肤文件theme.scss

$background-main-color1:#E9EDF0;    //背景色
$background-main-color2:#011E30;    //背景色

$font-main-color1:#4893e6;   //主要字体颜色
$font-main-color2:#168ABD;   //主要字体颜色

解析文件mixin.scss

@import "./theme.scss";    //引入声明的皮肤文件
  
//初次进入调用
@mixin background-main-color($color){ //@mixin 后面的函数名称为自定义。
    background-color: $color;   //背景色默认为参数
    [background-main-color="background-main-color2"] & {    //如果条件成立，背景色则用$background-main-color2
        background-color: $background-main-color2;    //这个$background-main-color2已经在theme.scss中定义过了。  
    }
}

@mixin font-main-color($color){
    color: $color;   //默认为1
    [font-main-color="font-main-color2"] & {    //2
        color: $font-main-color2;
    }
}

调用文件 xx.vue,（注意如果在某个scss中调用，需要将mixin和theme文件都引入；如果在单个vue中调用，假设你全局引入了scss，则不需要在页面中引入这两个文件）

.all{
  @include background-main-color($background-main-color1);
  //background-main-color 为mixin中定义的名称，括号里为theme中声明的值。
  解析为 background:"#E9EDF0"
}

 

修改文件 xx.vue

 window.document.documentElement.setAttribute("background-main-color","background-main-color2");
//第一个"background-main-color" 指的是mixin中我们自定义声明的名称，"background-main-color2"指的是我们传的参数，
相当于mixin中的 $color，如果条件成立则会用下面的样式。