Question

我想做的是基于数字数组创建一个边距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;
}

有人知道这可以做到吗？

Answer 1

您实际上很接近。您可以使用以下语法生成所需的类：

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

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

#{$n}被称为interpolation，它是使变量以此处所需方式访问所必需的。

Answer 2

尝试一下以获得更好的结果

$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right); // Leave this variable alone

@each $space in $spaceamounts {
  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }
  }
}

结果

.mt-5 {
  margin-top: 5px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

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

.mr-5 {
  margin-right: 5px !important;
}
...
...

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

2 个答案: