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

Posted 2023-03-16

【中文标题】SCSS / SASS：如何在每个循环中创建变量

【英文标题】：SCSS / SASS : How to create variables inside an each loop

【发布时间】：2019-12-06 14:21:41

【问题描述】：

在我的 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)

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

【问题讨论】：

您的代码示例运行良好，请查看sassmeister。你使用的是什么 Sass 编译器和什么版本的 Sass？

哦，看来我误解了你的问题，你想创建 scss 变量，而不是 CSS 变量。 Sass 不支持动态变量创建。

Creating or referencing variables dynamically in Sass的可能重复

@Arkellys，我的错，我找类似的时候没找到

@Flying，好的，谢谢你的回答，遗憾的是我期待这样一个否定的答案，但是好的，我会做两次声明；）

【参考方案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);
                              
                          
                      
                  
              
          
      
    
 

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

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

【讨论】：

感谢您的回答，但这并不是我真正想要做的......我已经拥有了我所有颜色的数组，并且我已经在它们上制作了一个以创建我不同的 css变量...但是我想从SASS中的数组动态创建变量...正如Flying所说，这是不可能的...

【参考方案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  

【讨论】：

嗯，我看到你在这里做了什么，谢谢你的回答，没想到它可以带函数，我去看看；）