vue+sass实现换肤功能

KNJON

983852

发布于
2018-11-15

1 需求：根据所选的主题色，自动切换当前的主题
2 想法：我用sass做了mixin, 根据不同的传参来改变颜色，但现在也是我css传什么值，他就显示什么算是写死的，我如果将js选中的值传入在css引入的mixin中？请教各位。

vue.js sass javascript

阅读 5k

3 个回答

wlove

为什么搞得这么复杂啊.
都要通过js去操作了直接改变不就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            font-size: var(--fonts-size);
            background: var(--backgroundColor)
        }
    </style>
</head>
<body>
        <div class="box">111111111111111111</div>
    <script>
        

    var  box =  document.querySelector('.box');
    box.style.setProperty('--fonts-size', "50px")
    box.style.setProperty('--backgroundColor', "red")


    </script>
</body>
</html>

KNJON

983852

发布于
2018-11-15

我用自定义属性的办法解决了这个问题
@mixin font_color ($color){
  color: $color;  //这是默认值
  [data-theme="theme1"] & {
    color: $color-theme1; // 匹配属性的字段，一样就覆盖上面的。js中进行属性的值的改写
  }
  [data-theme="theme2"] & {
    color: $color-theme2;
  }
  [data-theme="theme3"] & {
    color: $color-theme3;
  }
}