基于类的 sass @if 语句答案

【问题标题】：sass @if statement based on a class基于类的 sass @if 语句
【发布时间】：2014-02-14 10:47:40
【问题描述】：

我能否以某种方式利用 sass 中的静态类来根据定义的颜色变量设置子元素的样式？

假设我有一个名为 red 的类，我想基于该类定义一个名为 $color: classname; 或 $color: #ff0000; 的变量。

如果类为红色，则使用自定义颜色定义一个现有变量，以便我可以根据容器上的类在我的 scss 文件中的任何地方重用该变量。

请注意，我需要的颜色数量有限，可以在 sass 中定义它们。

【问题讨论】：

标签： sass

【解决方案1】：

这就是你要找的吗？

$colors : (red, blue, green); // array of colors

@each $color in $colors {     
    .#{$color} {  
       color: $color;
    }
}

上述SASS的输出是

.red { 
   color: red;
}

.blue { 
   color: blue;
}

.green { 
   color: green;
}

【讨论】：

【解决方案2】：

我相信你想要做的是：

在名为“base.scss”的示例文件中：

$red: red;/*this could be a HEX, RGB, whatever*/
@import "other"

在名为“other.scss”的示例文件中：

div
{
    color: $red
}

【讨论】：

【解决方案3】：

如果我理解纠正您的问题，您可以使用红色类并在需要时扩展该类。

$red: #FF0000;

.red {
  color: $red;
}

.div {
  @extend .red;
}

【讨论】：

是的，我知道我可以做到这一点，但是，我只需要 1 个变量用于我的 scsss 文件中的所有位置，我根据类定义颜色。你提出的方式我需要在我想要设置样式的每个子元素上设置 4 个不同颜色的变量。