声明变量青菜彩色网络换

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 

这是远离清洁或模块化的代码，但希望它概述了您需要按照

这里处理的原理是工作用的例子codePen：http://codepen.io/anon/pen/rewoOY