【问题标题】:How to define a group of variables in stylus?如何在手写笔中定义一组变量?
【发布时间】:2018-01-15 16:11:43
【问题描述】:

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

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

【问题讨论】:

    标签: stylus


    【解决方案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;
    }
    

    【讨论】:

    • 我认为这是最好的方法。谢谢!
    猜你喜欢
    • 2015-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多