有什么方法可以使用全局变量来设置 scss 属性吗？

Question

@mixin background-color($color) {
    background-color: $color;
}
$color:green;
.unit{
    &.red
    {
        $color:red !global;
    }
    &.blue
    {
        $color: blue !global;
    }
    @include background-color($color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px;
 }

大家好，我正在为我的项目使用 SCSS。以上是代码。我正在创建具有多个 class 名称“.unit”和颜色的多个 div 元素。例如

<div classname="unit red">
1
</div>
<div classname="unit">
2 
</div>

我希望它能正常工作。unit 属性和背景颜色为红色，第一个和第二个为绿色。但是，它不是那样工作的，而是将 $color 属性设置为最后设置的蓝色，忽略选择器。请帮忙解决这个问题。提前致谢。

Answer 1

首先，你应该为变量的第一个定义设置一个!default。之后，您应该为所有状态设置背景色。

html:

<div class="unit red">1</div>

<div class="unit">2</div>

css:

@mixin background-color($color) {
  background-color: $color;
}

$color: green !default;

.unit {
  @include background-color($color);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px;
  
  &.red {
    $color: red;
    @include background-color($color);
  }
  
  &.blue {
    $color: blue;
    @include background-color($color);
  }
 }

此代码应该有效。

有什么方法可以使用全局变量来设置 scss 属性吗？

Is there any ways to use global variables to set scss properties?

css

sass

css-selectors

reactjs

scss-mixins