Sass - 在@each中使用不同的变量[重复]

Posted 2023-03-16

【中文标题】Sass - 在@each中使用不同的变量[重复]

【英文标题】：Sass - using different variables in @each [duplicate]

【发布时间】：2014-06-24 21:06:49

【问题描述】：

我有不同行星的宽度

$mercury-width: 20px;

$venus-width: 30px;

$earth-width: 20px;

和他们的名字：

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

它不起作用。

预期结果：

.mercury 
    width: 20px;

等等

我该怎么做？

【参考方案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;

【讨论】：

谢谢，但如果我有一个行星颜色的循环，我是否应该制作另一个数组，例如 $planets-color: (mercury: red,earth: blue);然后另一个@each。太多了

@JangBi 写起来很有趣。顺便说一句，您可以接受答案；）