Question

是否可以在sass中创建一个类名变量。如果是这样，我该怎么做：

$colorlist();

$blue:    #007bff;
$yellow:  #99s9e0;
$red:  #f4i304;

$colorlist: map-merge((
 "blue":   $blue,
 "yellow":  $yellow,
 "red":     $red,
)
$colorlist
);

现在我要用HTML类编写：“ bg-blue” bg是一个提供元素的类由“-”符号后的颜色定义的背景颜色。

目前我有这个：

$red:  #900;
$colorlist();
$colorlist: map-merge(
                (
                       "color1": $red,
                ),
                $colorlist
);


.bg-#{$colorlist} {
  background-color: $colorlist;
}

在ReSedano的建议下

$red:  #900;
$colorlist();
$color();
$colorlist: map-merge(
                (
                       "color1": $red,
                ),
                $colorlist
);


.backg-#{$color} {
  background-color: map_get($colorlist,$color);
}

Answer 1

尝试这种方式：

$red:  #900;
$colorlist:();
$color:();
$colorlist: map-merge(
   (
      red: $red,
    ),
  $colorlist
);

@mixin background($color){
  .backg-#{$color} {
    background-color: map-get($colorlist,$color);
  }
}


@include background(red);

您的输出将是这样：

.backg-red {
  background-color: #900;
}

我可以在sass中设置类名变量吗？

1 个答案: