如何使用 SASS 更改 CSS 中 div 中的变量

Question

我想知道是否有任何方法可以更改div内部变量的分配。查看代码，我认为它更明显地看到我想要的东西：

 ## CSS ##
.div-name-1 {
  $cor: #f00;
}
.div-name-2 {
  $cor: #d1d1d1;
}
.div-name-3 {
  $cor: #fff;
}
.whatever{
  background: $cor;
}

<div class="div-name-2>
<div class="whatever">
</div>
<div class="div-name-3>
<div class="whatever">
</div>

Answer 1

IIRC，SASS中的变量的作用域是它们出现的块。由于.div-name-1和.whatever是不同的块，因此它们是不同的作用域，不能在它们之间传递变量的值。

您需要重新组织您的 SASS 代码，使它们位于同一块中，或者引入 mixin 以创建相同的效果：

.div-name-1 {
  $cor: #f00;
  .whatever {
    background: $cor;
  }
}
.div-name-2 {
  $cor: #d1d1d1;
  .whatever {
    background: $cor;
  }
}

或者：

@mixin whatever($cor) {
  .whatever {
    background: $cor;
  }
}
.div-name-1 { @include whatever(#f00);  }
.div-name-2 { @include whatever(#d1d1d1); }