基于数组在SCSS中动态创建css值列表

我想做的是根据am数组创建一个margin css类列表.

例如我希望我的CSS看起来像这样.

.ml-5 { margin-left: 5px; }

.ml-10 { margin-left: 10px; }

.ml-15 { margin-left: 15px; }

我想在我的SCSS文件中执行以下操作,为一组数字生成这些内容

$list: 5, 10, 15, 20, 25, 30;

@each $n in $list {
    .ml-$n: margin-left:$n;
}

任何人都知道这是否可以做到？

你实际上非常接近.您可以使用此语法生成所需的类：

$list: 5, 10, 15, 20, 25, 30;

@each $n in $list {
    .ml-#{$n} { margin-left:$n; }
}

#{$n}被称为interpolation,需要以此处所需的方式访问您的变量.