Question

我有不同行星的宽度

$mercury-width: 20px;

$venus-width: 30px;

$earth-width: 20px;

和他们的名字：

`
$planets: mercury, venus, earth;
@each $planet in $planets {
      .#{$planet} {
        width: #{$planet}-width;
      }
    }

它不起作用。

预期结果：

.mercury {
    width: 20px;
}

等

我该怎么做？

Answer 1

这个怎么样：

$planets-width: (mercury: 20px, venus: 30px, earth: 20px);
@each $name, $width in $planets-width {
      .#{$name} {
        width: $width;
      }
}

结果：

/* line 3, ../scss/test.scss */
.mercury {
  width: 20px;
}

/* line 3, ../scss/test.scss */
.venus {
  width: 30px;
}

/* line 3, ../scss/test.scss */
.earth {
  width: 20px;
}

如果您想要颜色和大小，可以使用嵌套地图：

$planets-map: (mercury: (width : 20px, color: red), venus: (width : 30px, color : purple), earth:( width: 20px, color: blue));
@each $name, $properties in $planets-map {
      .#{$name} {
        width: map-get($properties, width);
        color: map-get($properties, color);
      }
}

结果：

/* line 3, ../scss/test.scss */
.mercury {
  width: 20px;
  color: red;
}

/* line 3, ../scss/test.scss */
.venus {
  width: 30px;
  color: purple;
}

/* line 3, ../scss/test.scss */
.earth {
  width: 20px;
  color: blue;
}

Sass - 在@each中使用不同的变量

1 个答案: