如何在“变量”中插入SCSS变量？

9o685dep 于 2023-01-03 发布在其他

关注(0)|答案(1)|浏览(147)

我需要看看是否有一种方法可以解析出有效的、动态生成的变量。
我的应用程序中有一个来自variables.scss文件的“颜色”定义列表：

$colorsList: "primary" "success" "info" "warning" "danger" "inverse";

然后，我有一些Map到各种颜色的变量：

$primary-color: #558bc3 !default;
$success-color: #259d2c !default;
$info-color: rgba(43, 169, 251, 0.39) !default;
$warning-color:              #FAAA00 !default;
$danger-color: #c82e2d !default;
$inverse-color: #000;

我正在尝试创建一个SCSS页面，将有效地创建一些生成的颜色块/CSS规则：

@each $color in $colorsList {

    $col: "$color-#{$color}";
    $bgcol: "$color-#{$color}";

    .bg-#{$color} {
        background-color: "#{$bgcol}";
    }
    .color-#{$color} {
        color: "#{$col}";
    }
}

这将产生以下输出：

.bg-primary {
  background-color: "$color-primary"; }

.color-primary {
  color: "$color-primary"; }

.bg-success {
  background-color: "$color-success"; }

实际上，我想做的是将输出中的这些变量解析为变量值：$color-success被#259d2c改变，以此类推。
有什么办法可以做到吗？或者是一些变通办法？

css

来源：https://stackoverflow.com/questions/74973227/how-to-interpolate-a-scss-variable-in-a-variable

1条答案

按热度按时间

f87krz0w1#

不，你所尝试的是不可能的，至少对于来说是这样。一个SCSS变量只会被解释一次，正如你在官方的documentation上所看到的：
Sass变量很简单：将值赋给以$开头的名称，然后可以引用该名称而不是值本身
因此，当调用background-color: "#{$bgcol}"时，$bgcol会被它的值替换，在SCSS眼中，它只是一个字符串，就像任何interpolated result一样：
插值可以在SassScript中使用，以将SassScript插入到未加引号的字符串中。这在动态生成名称（例如，动画）或使用斜线分隔值时特别有用。请注意，SassScript中的插值始终返回未加引号的字符串。
在SCSS世界中，您可以做的是借助map将颜色名称Map到颜色，如下所示：

@use "sass:map";

$colorsList: "primary" "success" "info" "warning" "danger" "inverse";
$mapedColorsList: (
  "primary": #558bc3,
  "success": #259d2c,
  "info": rgb(43 169 251 / 39%),
  "warning": #faaa00,
  "danger": #c82e2d,
  "inverse": #000,
);

@each $color in $colorsList {
  .bg-#{$color} {
    background-color: map.get($mapedColorsList, $color);
  }
  .color-#{$color} {
    color: map.get($mapedColorsList, $color);
  }
}

赞(0）回复(0）举报 2023-01-03

我来回答

如何在“变量”中插入SCSS变量？

1条答案

相关问题

热门标签

最新问答