首页 文章

基于类的sass @if语句

提问于
浏览 次
1

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

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

如果class为红色，则使用自定义颜色定义现有变量，这样我就可以根据容器上的类在我的scss文件中的任何位置重用该变量 .

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

sass

3 回答

  • 0

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

    $red: #FF0000;

.red {
  color: $red;
}

.div {
  @extend .red;
}
    回复于
  • 0

    我相信你要做的是：

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

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

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

    div
{
    color: $red
}
    回复于
  • 3

    这是你在找什么？

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

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

    上述SASS的输出是

    .red { 
   color: red;
}

.blue { 
   color: blue;
}

.green { 
   color: green;
}
    回复于

相关问题