如何在手写笔中定义一组变量?

时间:2018-01-13 22:58:45

标签: stylus

我想知道是否有办法在两组变量定义之间切换。例如,要更改颜色主题:

$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的上述方法,但它不适用于变量。

1 个答案:

答案 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;
}