时间戳

首页 > 解决方案 > 有没有办法使用全局变量来设置 scss 属性？

css - 有没有办法使用全局变量来设置 scss 属性？

问题描述

@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。以上是代码。我正在使用多个类名“.unit”和颜色创建多个 div 元素。例如

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

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

标签： cssreactjssasscss-selectorsscss-mixins

解决方案

首先，您应该为变量的第一个定义设置一个 !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);
  }
 }

这段代码应该可以工作。

推荐阅读