使用 Stylus 以编程方式创建类答案

【问题标题】：Creating classes programmatically with Stylus使用 Stylus 以编程方式创建类
【发布时间】：2019-11-14 22:40:55
【问题描述】：

我想知道是否有一种方法可以使用迭代器以编程方式使用手写笔创建类。

例子：

$my-colors = {
  "black":  #344F5E,
  "grey":   #E0E0E3,
}

我知道有 define()，但我不确定这是否有效，如果有效，我将如何访问键和值。

喜欢

for col in $rf-colors
  define('rf-bg-' + col @() {
    background-color:
  })

目标是扩展调色板并自动生成所有类。也许我使用了完全错误的方法。

【问题讨论】：

标签： stylus

【解决方案1】：

您可以将interpolation 与{} 一起使用，并在哈希for $key, $value in $hash 上使用循环：

$my-colors = {
 "black": #000,
 "white": #fff
}

for $name, $color in $my-colors {
  .{$name} {
    background-color: $color
  }
}

将输出：

.black {
  background-color: #000;
}
.white {
  background-color: #fff;
}

define() 函数用于define 变量。

【讨论】：