SCSS / SASS：如何在每个循环中创建变量

Question

在我的 SASS 代码中，我有一个包含所有颜色的数组，然后我创建了一个 each 循环来从这些颜色创建 css 变量，最后我想做另一个循环来创建每个 sass这些css颜色的变量......让我告诉你：

/************************************************************
**********************   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)

所以我的问题是有可能实现这样的目标吗？;创建变量真的很有帮助，如果我想删除/添加一个，我只需要在数组中进行，然后所有代码都会自行更新......

Answer 1

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

我在我的投资组合网站上所做的是，我存储了一些颜色，然后将它们保存到另一个变量中。因此该变量将保存所有颜色，您也可以将其用作数组。因此，如果您删除或更新循环将根据给定的变量工作

我已附上代码，希望对您有所帮助

Answer 2

正如cmets中提到的Flying，Sass不支持动态变量创建。 如果在$colors 地图中找到，我想我会使用一个函数来返回 CSS 变量

$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