SCSS / SASS:如何在每个循环内创建变量
SCSS / SASS : How to create variables inside an each loop
在我的 SASS 代码中,我有一个包含所有颜色的数组,然后我创建了一个 each 循环来从这些颜色创建 css 变量,最后我想做另一个循环来创建这些 css 颜色的每个 sass 变量...让我告诉你:
/************************************************************
********************** COULEURS *************************
************************************************************/
$colors : (
"pink" : #E20071,
"blue" : #00A3DA,
"gray" : #939394,
"darkGray" : #939394,
"yellow" : #FEA347,
"green" : #4CA66B,
"white" : #FFFFFF,
"black" : #1B1B1B,
);
:root{
@each $key, $value in $colors {
--#{$key} : #{$value};
}
}
$pink : var(--pink);
$blue : var(--blue);
$gray : var(--gray);
$yellow : var(--yellow);
$green : var(--green);
$white : var(--white);
$black : var(--black);
$darkGray : var(--darkGray);
所以我尝试了这样的事情:
@each $key, $value in $colors {
$#{$key} : var(--#{$key});
}
但是它给我一个错误:Invalid CSS after "...ue in $colors {": expected 1 selector or at-rule, was "$#{$key} : var(--#{" in /home/simon/Documents/HL3/URSELF/app/src/variables.scss (line 28, column 32)
所以我的问题是是否有可能实现这样的目标?;创建变量真的很有帮助,如果我想删除/添加一个变量,我只需要在数组中进行,然后所有代码自行更新...
//Assigning Colors
$DeepKoamaru: rgba(16, 38, 111, 0.85);
$Mariner: rgba(41, 128, 185, 0.85);
$Gumbo: rgba(136, 160, 168, 0.85);
$Blackberry: rgba(77, 1, 53, 0.85);
$RoseBudCherry: rgba(150, 0, 57, 0.85);
$Bouquet: rgba(140, 102, 127, 0.85);
$Chocolate: rgba(60, 0, 0, 0.85);
$DarkBurgundy: rgba(107, 0, 15, 0.85);
$AlizarinCrimson: rgba(165, 107, 104, 0.85);
$brand-colors: $DeepKoamaru, $Mariner, $Gumbo, $Blackberry, $RoseBudCherry, $Bouquet, $Chocolate, $DarkBurgundy, $AlizarinCrimson;
@for $i from 1 through 9 {
.color-#{$i}-bar {
header {
.logo {
svg {
color: nth($brand-colors, $i);
}
}
.menu {
svg {
color: nth($brand-colors, $i);
}
.nav-items {
ul {
li {
a {
&:hover {
color: nth($brand-colors, $i);
}
}
}
}
}
}
}
}
}
我在我的投资组合网站上所做的是,我存储了一些颜色,然后将它们保存到另一个变量中。因此该变量将保存所有颜色,您也可以将其用作数组。因此,如果您删除或更新循环将根据给定的变量工作
我附上了代码,希望对你有帮助
如评论中Flying所述Sass不支持创建动态变量。
如果在 $colors
映射
中找到 CSS 变量,我想我会使用一个函数来 return
$colors : (
"pink" : #E20071,
"blue" : #00A3DA,
"gray" : #939394,
"darkGray" : #939394,
"yellow" : #FEA347,
"green" : #4CA66B,
"white" : #FFFFFF,
"black" : #1B1B1B,
);
:root{
@each $key, $value in $colors {
--#{$key} : #{$value};
}
}
@function color($name){
@if not map-get($colors, $name+''){
@error "Color `#{$name}` not found in map $colors";
}
@return var(--#{unquote($name)});
}
.class-name {
color: color(pink); // var(--pink);
color: color(nope); // throws error: "Color `nope` not found in map $colors"
}
// note! we stringify $name (the +'' part) to ensure Sass does not interpret
// it as a color – e.g. pink represents the hex value #ffc0cb
在我的 SASS 代码中,我有一个包含所有颜色的数组,然后我创建了一个 each 循环来从这些颜色创建 css 变量,最后我想做另一个循环来创建这些 css 颜色的每个 sass 变量...让我告诉你:
/************************************************************
********************** COULEURS *************************
************************************************************/
$colors : (
"pink" : #E20071,
"blue" : #00A3DA,
"gray" : #939394,
"darkGray" : #939394,
"yellow" : #FEA347,
"green" : #4CA66B,
"white" : #FFFFFF,
"black" : #1B1B1B,
);
:root{
@each $key, $value in $colors {
--#{$key} : #{$value};
}
}
$pink : var(--pink);
$blue : var(--blue);
$gray : var(--gray);
$yellow : var(--yellow);
$green : var(--green);
$white : var(--white);
$black : var(--black);
$darkGray : var(--darkGray);
所以我尝试了这样的事情:
@each $key, $value in $colors {
$#{$key} : var(--#{$key});
}
但是它给我一个错误:Invalid CSS after "...ue in $colors {": expected 1 selector or at-rule, was "$#{$key} : var(--#{" in /home/simon/Documents/HL3/URSELF/app/src/variables.scss (line 28, column 32)
所以我的问题是是否有可能实现这样的目标?;创建变量真的很有帮助,如果我想删除/添加一个变量,我只需要在数组中进行,然后所有代码自行更新...
//Assigning Colors
$DeepKoamaru: rgba(16, 38, 111, 0.85);
$Mariner: rgba(41, 128, 185, 0.85);
$Gumbo: rgba(136, 160, 168, 0.85);
$Blackberry: rgba(77, 1, 53, 0.85);
$RoseBudCherry: rgba(150, 0, 57, 0.85);
$Bouquet: rgba(140, 102, 127, 0.85);
$Chocolate: rgba(60, 0, 0, 0.85);
$DarkBurgundy: rgba(107, 0, 15, 0.85);
$AlizarinCrimson: rgba(165, 107, 104, 0.85);
$brand-colors: $DeepKoamaru, $Mariner, $Gumbo, $Blackberry, $RoseBudCherry, $Bouquet, $Chocolate, $DarkBurgundy, $AlizarinCrimson;
@for $i from 1 through 9 {
.color-#{$i}-bar {
header {
.logo {
svg {
color: nth($brand-colors, $i);
}
}
.menu {
svg {
color: nth($brand-colors, $i);
}
.nav-items {
ul {
li {
a {
&:hover {
color: nth($brand-colors, $i);
}
}
}
}
}
}
}
}
}
我在我的投资组合网站上所做的是,我存储了一些颜色,然后将它们保存到另一个变量中。因此该变量将保存所有颜色,您也可以将其用作数组。因此,如果您删除或更新循环将根据给定的变量工作
我附上了代码,希望对你有帮助
如评论中Flying所述Sass不支持创建动态变量。
如果在 $colors
映射
$colors : (
"pink" : #E20071,
"blue" : #00A3DA,
"gray" : #939394,
"darkGray" : #939394,
"yellow" : #FEA347,
"green" : #4CA66B,
"white" : #FFFFFF,
"black" : #1B1B1B,
);
:root{
@each $key, $value in $colors {
--#{$key} : #{$value};
}
}
@function color($name){
@if not map-get($colors, $name+''){
@error "Color `#{$name}` not found in map $colors";
}
@return var(--#{unquote($name)});
}
.class-name {
color: color(pink); // var(--pink);
color: color(nope); // throws error: "Color `nope` not found in map $colors"
}
// note! we stringify $name (the +'' part) to ensure Sass does not interpret
// it as a color – e.g. pink represents the hex value #ffc0cb