我想知道是否有办法在两组变量定义之间切换。例如,要更改颜色主题:
$my-blue = #1876d3
$my-white = #f6f6f6
blue-on-white()
$primary-color = $my-blue
$secondary-color = $my-white
white-on-blue()
$primary-color = $my-white
$secondary-color = $my-blue
// Now I could go back and forth between both schemes to see which one I prefer
blue-on-white()
// white-on-blue()
我尝试过使用mixins的上述方法,但它不适用于变量。
答案 0 :(得分:1)
也许还有其他或更好的方法,但我找到了使用哈希的解决方案:http://stylus-lang.com/docs/hashes.html。
<强>手写笔强>
blue = #1876d3
white = #f6f6f6
blue-on-white = {
primary-color : blue,
secondary-color : white
}
white-on-blue = {
primary-color : white,
secondary-color : blue
}
h1
color blue-on-white[primary-color];
background-color blue-on-white[secondary-color];
h2
color white-on-blue[primary-color];
background-color white-on-blue[secondary-color];
已编译的CSS
h1 {
color: #1876d3;
background-color: #f6f6f6;
}
h2 {
color: #f6f6f6;
background-color: #1876d3;
}