如何在sass中使用循环生成多个mixin（mixin lib）

Question

我想保持我的 sass 代码简短。

而不是

@mixin tg($font-size,$line-height) {
  something related to font-size and line-height
}

@mixin h1 {
  @include tg 
}

@mixin h2 {
  @include tg 
}

....

如何创建带有循环的@mixin lib？

$typography-list: h1, h2......
@mixin tg($font-size,$line-height) {
  something related to font-size and line-height
}


@each $typography in $typography-list {
  create @mixin {
    @include tg()
  }
}

如果是这样，最好的方法是什么？

Answer 1

本质上，你指的是

SCSS

产生

SCSS

。这称为“元编程”。这在SASS中是不可能的。除非 SASS 发明了某种技术，或者你有另一种语言可以编译为

SCSS

。简而言之，目前你还不能这样做。

Answer 2

在webpack中添加任务（规则），通过js生成.sass/.scss文件

1. 然后编译它们