css的内容可以根据类名来取值吗，或者其他预处理工具

Question

比如

.margin-left-XXX{
     margin-left:XXXpx
}

XXX是变量，我用的时候class="margin-left-20",自动就是20，这样

Answer 1

写了一个demo，例如前期先在项目目录下创建一个common.less文件，文件下的代码如下

.generate-margin-left(50);
.generate-margin-left(@n, @i: 5) when (@i =< @n) {
    .margin-left-@{i} {
        margin-left: @i + 0px;
    }
    .generate-margin-left(@n, (@i+5));
  }

预生成自定义命名规则的样式，后期直接引用即可，当然生成条件可以按需调整。

顺路附上scss的写法

  @for $i from 1 through 10 {
    .margin-left-#{$i * 5} {
        margin-left: $i * 5px;
    }
}

Answer 2

用 stylus 可以做到，其它预处理工具也行。