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)