在手写笔中使用mixins作为类名

Question

我是一个手写笔的初学者，正在与vue合作创建一个小型组件库。我想知道是否有一种方法可以使用混合作为类名来实现以下功能：

<style lang="stylus"> // this is where the stylus code is written.
bgColor (argument)
  background-color: argument
</style>

然后，我将在HTML模板中使用以下代码：

<div class="bgColor(ff0000)"></div>

我基本上想要实现的是一种简单的方式来使用手写笔模拟原子化器(https://acss.io/guides/atomizer.html)。

我也对任何其他实现这一目标的方式持开放态度。

提前感谢！

Answer 1

手写笔是一种预处理语言，即使在Vue上，它在编译后也不是动态的。

但是您可以通过将每个颜色选项生成为一个类来实现。

<style lang="stylus">
colors = ( ff0000, ff00ff ) // color collection
for color in colors
  .bgColor\({color}\)
    background-color unquote('#' + color)
</style>