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循环才能做到这一点。

SCSS：

$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; }

Answer 2

不确定这个用途，但是......

<强>萨斯：

@mixin marginTop($amount) {
  .marginTop-#{$amount} {
    margin-top: unquote($amount + 'px');
  }
}

@include marginTop(1);
@include marginTop(100);

已编译的CSS ：

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

.marginTop-100 {
  margin-top: 100px;
}