postcss-for

1.安装

# yarn add postcss-for -D

2.配置(postcss.config.js)

module.exports = {
  plugins: [
    ...,
    require('postcss-for'),
    require('postcss-simple-vars')//<-前
  ]
}

3.使用

例1：

@for $i from 1 to 3 {
  .a-$(i) {
    padding: $(i)px;
  }
}

例2：

@for $i from 1 to 3 by 2 {
  .a-$(i) {
    padding: $(i)px;
  }
}

例3：

@for $x from 1 to 3 by 2 {
  @for $y from 1 to $x by 2 {
    @for $z from $x to $y by 2 {
      .a-$(x)-$(y)-$(z) {
        padding: $(x)px $(y)px $(z)px;
      }
    }
  }
}