CODEWITHSUNDEEP
sass
Seeliang
Seeliang

Reputation: 2949

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

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?

Upvotes: 7

Views: 3655

Answers (2)

Sariato
Sariato

Reputation: 11

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

Upvotes: 0

Harshal Patil
Harshal Patil

Reputation: 20950

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.

Upvotes: 1

Related Questions