gpt4 book ai didi

css - 在变量中使用 SCSS 变量

转载 作者:太空宇宙 更新时间:2023-11-04 01:33:20 25 4
gpt4 key购买 nike

我想使用如下的 SCSS 循环:

@each $var in dark, purple, green, cyan, silver, white {

.text-#{$var} {
color: nth($color-, $var);
}
.btn-#{$var} {
background-color: nth($color-, $var);
}
}

为了使用以下变量:

$color-dark: #0D0E1E;
$color-purple: #333366;
$color-green: #33cc99;
$color-cyan: #00cccc;
$color-silver: #ccc;
$color-white: #fff;

但它不起作用。$color-#{$var} 也不能正常工作。我可以这样做吗?

最佳答案

nth 获取列表中的一个元素。第一个参数是列表,第二个是列表中的索引。 SASS 也认为任何带有 $ 的东西都是一个变量,所以 $color- 也是一个变量。您尚未将 $color- 定义为变量,这不是您的预期用途。

DOCS .

但是你可以用 map 得到你想要的结果......

DEMO

$color-dark: #0D0E1E;
$color-purple: #333366;
$color-green: #33cc99;
$color-cyan: #00cccc;
$color-silver: #ccc;
$color-white: #fff;

$colors: (
dark: $color-dark,
purple: $color-purple,
green: $color-green,
cyan: $color-cyan,
silver: $color-silver,
white: $color-white
);

@each $name, $val in $colors {
.text-#{$name} {
color: $val;
}

.btn-#{$name} {
background-color: $val;
}
}

关于css - 在变量中使用 SCSS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46698750/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com