如何在变量中插入 SCSS 变量

发布于01月01日

我需要看看是否有一种方法可以解析出有效、动态生成的变量.

在我的应用程序中，我有一个来自variables.scss文件的‘ colored颜色 ’定义列表:

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

然后我有许多变量映射到不同的 colored颜色 :

$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;

我正在try 创建一个SCSS页面，该页面将有效地创建一些生成的 colored颜色块/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，依此类推.

有办法做到这一点吗？或者是一些变通办法？

@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); } }

如何在变量中插入 SCSS 变量

推荐答案

Css相关问答推荐

try 在Jekyll中使用多个SCSS文件时出错

将数据从react组件发送到css文件

如何在 CSS 中使 Flex 容器内的网格响应，而不 destruct 外部 Flex 容器的布局？

如何取消 CSS 伪类中的属性设置？

在 Next.js 中使用 .modules.scss 时未应用样式

如何使用 Tailwind CSS 稳定 React 中的浮动标签？

如何在 konvajs 中居中放置项目？

如何在不使用！important 的情况下提高优先级？

Angular Datepicker - 更改日期范围 Select 样式

图像 3D 悬停效果

在移动设备上touch 屏幕边缘的元素(Material UI)

全部：初始与使用 CSS 重置

Bootstrap 3 - 在每个网格列之后打印布局和中断

Div Size 自动调整内容大小

在 Firefox 中删除额外的按钮间距/填充

rotate3d 速记

如何使用 CSS 绘制复选标记/勾号？

Bootstrap 3 Glyphicons CDN

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素？

CSS 中的星号属性是什么意思？