Question

我正在为我的网络制作换色器，是否可以像这样制作变量：

.red { $color: red; $background: red; }
.green { $color: green; $background: green; }
.blue { $color: blue; $background: blue; }

感谢

Answer 1

你的SASS在这里没有任何本质上的错误 - 至少在原则上 - 但在语法上它有点倾斜。此外，您尝试做的事情虽然需要客户端运行时代码才能实现。

首先，虽然你实际上并不需要变量 - 但我们会用它来运行。所以将你的sass改为

$red: #ff1a1a;
$green: #5cd65c;
$blue: #1a75ff;

.blue { background-color: $blue; }
.green { background-color: $green }
.red { background-color: $red }

假设这会生成一个CSS文件并将其导入HTML页面，您需要一些Javascript才能将相应的颜色类应用于您要对此属性进行的元素。

假设你有3个具有唯一ID的元素（按钮），点击后会改变元素id = foo的背景颜色，你可能会有类似

的颜色

var changeColor = function(col) {
    document.getElementById("foo").className = col
}

document.getElementById('buttonblue').addEventListener('click', 
 function() {
    changeColor('blue');
 }, false);
 document.getElementById('buttongreen').addEventListener('click', 
 function() {
    changeColor('green');
 }, false);
 // ... etc etc for each color button you have

这远不是干净或模块化的代码，但希望它概述了您需要遵循的流程原则

这是一个有效的代码示例：http://codepen.io/anon/pen/rewoOY

为颜色卷筒更换器声明sass中的变量

1 个答案: