如何使用Stylus迭代器程序化创建CSS类？

当然可以用Stylus的迭代器来自动生成这类样式类，你的思路方向是对的，只是语法细节上需要调整一下～

首先，Stylus遍历对象时，支持同时获取键和值，语法是for key, value in 对象，这正好能满足你同时用颜色名（键）和颜色值来生成类的需求。不需要用到define()方法，直接循环生成选择器就足够简洁高效。

完整示例代码 #

// 定义你的调色板对象
$my-colors = { 
  "black": #344F5E, 
  "grey": #E0E0E3,
  // 后续扩展调色板直接加新的键值对即可
  "blue": #2196F3,
  "green": #4CAF50
}

// 遍历对象，自动生成背景色类
for color-name, color-value in $my-colors
  .rf-bg-{color-name}
    background-color: color-value

这段代码会自动编译出以下CSS：

.rf-bg-black {
  background-color: #344F5E;
}
.rf-bg-grey {
  background-color: #E0E0E3;
}
.rf-bg-blue {
  background-color: #2196F3;
}
.rf-bg-green {
  background-color: #4CAF50;
}

扩展：生成更多类型的样式类 #

如果需要批量生成其他样式（比如文本色、边框色），只需要在循环里添加对应的规则即可：

for color-name, color-value in $my-colors
  // 背景色类
  .rf-bg-{color-name}
    background-color: color-value
  // 文本色类
  .rf-text-{color-name}
    color: color-value
  // 边框色类
  .rf-border-{color-name}
    border-color: color-value

关于define()的补充 #

你提到的define()方法，主要用于动态定义变量、混入或者函数，比如define('my-var', #fff)会创建一个$my-var变量。在这个场景下，直接生成选择器的方式比用define()更直接，完全能满足你扩展调色板并自动生成类的需求。

内容的提问来源于stack exchange，提问作者Helmi