我可以在sass中创建我的classname变量吗?

loading...


0

是否可以在sass中创建一个classname变量 . 如果是这样,我该如何做以下事情:

$colorlist();

$blue:    #007bff;
$yellow:  #99s9e0;
$red:  #f4i304;

$colorlist: map-merge((
 "blue":   $blue,
 "yellow":  $yellow,
 "red":     $red,
)
$colorlist
);

现在我想写HTML类:“bg-blue”bg是一个类,它为元素提供由' - '符号后面的颜色定义的背景颜色 .

目前我有这个:

$red:  #900;
$colorlist();
$colorlist: map-merge(
                (
                       "color1": $red,
                ),
                $colorlist
);


.bg-#{$colorlist} {
  background-color: $colorlist;
}

提出了ReSedano的建议

$red:  #900;
$colorlist();
$color();
$colorlist: map-merge(
                (
                       "color1": $red,
                ),
                $colorlist
);


.backg-#{$color} {
  background-color: map_get($colorlist,$color);
}

loading...

1回答

  • 1

    试试这种方式:

    $red:  #900;
    $colorlist:();
    $color:();
    $colorlist: map-merge(
       (
          red: $red,
        ),
      $colorlist
    );
    
    @mixin background($color){
      .backg-#{$color} {
        background-color: map-get($colorlist,$color);
      }
    }
    
    
    @include background(red);
    

    你的输出将是这样的:

    .backg-red {
      background-color: #900;
    }
    
评论

暂时没有评论!