问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue+sass实现换肤功能

头像
KNJON
    984052

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

    vue.jssassjavascript
    阅读 5.1k
    3 个回答
    得票最新
    头像
    wlove
      6.9k3835
      为什么搞得这么复杂啊.
      都要通过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
        984052
        我用自定义属性的办法解决了这个问题
@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;
  }
}
        头像
        伍陆柒
          1.2k1413

          参照这个项目
          我们想项目 我就是参照这个项目里面的自定义换肤做的.
          它里面有两种换肤方法:

          • element-ui 的一种
          • 它项目中自己写的一种

          你可以参照一下

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题