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)