How to generate multiple mixins (mixin lib) with loop in sass

Question

I would like to keep my sass code short.

instead of

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

@mixin h1 {
  @include tg 
}

@mixin h2 {
  @include tg 
}

....

How can i create a @mixin lib with loop?

$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()
  }
}

if so, what is the best way of doing it?

Mortician

You can't create mixin that way, SASS compile into CSS not in another SASS. Why you need h1, h2, etc be mixins? – Hypoderma

I am trying to create a lib, so it can be shared cross project without creating any css. The css render part would be in different sass file – Mortician

ok, but if you don't compile, how can you run the loop to get the mixins? I don't understand – Hypoderma

I don't think sass can, and that is my question. i need help to achieve this with sass feature (create mixins in loop) – Mortician

Update: github.com/sass/sass/issues/2146 – Mortician

Answer 1

In essence, you are referring to SCSS producing SCSS. This is called as meta-programming. It is not possible in SASS. Unless SASS invents some technique or you have another language that compiles to SCSS.

In short, currently, you cannot do that.

Jealous

Answer 2

Sass can not. But you can do it with webpack or gulp.

1. Add task (rule) to webpack.config.js to generate .sass/.scss files by js
2. Then compile them with sass preprocessor
3. .sass will generate automatically when you run yarn watch

Hallucinogen