sass - SCSS 重复值？

Question

我正在努力研究 SCSS 我将如何处理这样的事情:

我希望在 1px 和 1000px 之间的任何地方都有一个边距，并为其设置一个类。

例如
.MarginTop-x

X 是我可以写任何值的地方。明明写不出来

.MarginTop-1 {margin-top:1px}
.MarginTop-2 {margin-top:2px}
.MarginTop-3 {margin-top:3px}
.MarginTop-4 {margin-top:4px}

等等...

Answer 1

那么你需要一个 @for循环做到这一点。

社会保障:

$class-slug: ".MarginTop";
$stop-loop:  4;

@for $i from 0 through $stop-loop {
  #{$class-slug}-#{$i} {
    margin-top: #{$i}px;
  }
}

编译的CSS:

.MarginTop-0 {
  margin-top: 0px; }

.MarginTop-1 {
  margin-top: 1px; }

.MarginTop-2 {
  margin-top: 2px; }

.MarginTop-3 {
  margin-top: 3px; }

.MarginTop-4 {
  margin-top: 4px; }