sass 如何根据某个参数，制定不同样式的皮肤。

Question

问题描述sass 根据某个参数，制定不同样式的皮肤，这种情况该怎么写css?问题出现的环境背景及自己尝试过哪些方法环境：sass,vue。公司项目是一套代码输出多个产品，通过后台返回的字段判断产品，之后再加载不同的样式。产品之间的不同点在于其样式颜色（皮肤）不同。之前所用的方法是给每个产品的最外层div 设置一个id ，之后再通过sass 的嵌套功能每个产品都添加一个css 。这就导致每添加一个产品，就要赋值粘贴一大段的公用css 代码。所以想问问有没有好点的方法，特来求助！相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）html简化后就是根据后台返回的字段显示不同的颜色样式。//产品1 -> skin 1<div id="app">     <div id="skin-1">         我是皮肤1    </div>  </div>//产品2 -> skin 2<div id="app">     <div id="skin-2">         我是皮肤1    </div>  </div>//sass文件//变量颜色$color-1:red; $color-2:green;#app{     & #skin-1{         background-color:$color-1;     }     & #skin-2{         background-color:$color-2;     } }你期待的结果是什么？实际看到的错误信息又是什么？我想问问有没有其他的方法？刚入行的小菜鸟，不是很会。

Answer 1

皮肤名A ->一套css设置 -一套结构
皮肤名B ->一套css设置 -一套结构

其中只用修改名称A,B。按这个思路做做。当然是针对一个产品来说。

Answer 2

@mixin bg_color(){
  background-color: #3f8e4d;//默认值
  [data-theme="theme1"] & {    background-color: red;    color: white;    font-size: 50px;
  }
  [data-theme="theme2"] & {    background-color: yellow;    color: black;    font-size: 40px;
  }
  [data-theme="theme3"] & {    background-color: black;    color: red;    font-size: 20px;
  }}

根据data-theme来改变当前选中的主题
window.document.documentElement.setAttribute('data-theme', theme)