基于类的sass @if语句

Question

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

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

如果class为红色，那么使用自定义颜色定义一个现有变量，这样我就可以根据我在容器上的类来重复使用scss文件中的任何变量。

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

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

Answer 2

如果我理解你的问题是正确的你可以使用红色类并在需要时扩展这个类。

$red: #FF0000;

.red {
  color: $red;
}

.div {
  @extend .red;
}

Answer 3

我相信你要做的是：

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

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

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

div
{
    color: $red
}