Question

我可以使用sass和循环来创建以下内容：

.m-t-0 {
    margin-top: 0px !important;
}

.m-t-1 {
    margin-top: 1px !important;
}

.m-t-2 {
    margin-top: 2px !important;
}

.m-t-3 {
    margin-top: 3px !important;
}

.m-t-4 {
    margin-top: 4px !important;
}

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

.m-t-6 {
    margin-top: 6px !important;
}

Answer 1

This是您在Google上搜索“sass loop”时获得的第一个结果。这是我们对引用页面的@for部分所拥有的内容：

@for $i from 1 through 4
  .#{$class-slug}-#{$i}
    width: 60px + $i

根据您提供的示例进行调整后，您会得到：

@for $i from 0 through 6
  .m-t-#{$i}
    margin-top: 1px * $i !important

用sass动态创建类

1 个答案: