在SASS中切换变量的值

Question

我想在 SASS ：

中做类似的事情

$GREEN: #57da99;
$HEADER_PURPLE: #8585ff;
$BLUEISH: #4478ff;
$RED: #ff475d;
$RED2: #ff445e;

$currentColor:null;

body.page-about       { $currentColor: $BLUEISH; }
body.page-browse      { $currentColor: $GREEN; }
body.page-signup      { $currentColor: $HEADER_PURPLE; }
body.page-login       { $currentColor: $HEADER_PURPLE; }
body.page-contribute  { $currentColor: $RED; }

我没有错误，它编译成功。但是当我查看我的页面时， $ currentColor 的值是 $ RED ，即使我不在 body.page-contribution 。< / p>

所以，我不知道 SASS 是否处理不当或者是否犯了大错。

感谢。

Answer 1

您正在声明具有全局范围的Sass变量，因此每行都在修改全局变量，就像在JavaScript中一样。 您可以在两行之间使用@debug $currentColor;来查看变量状态。

您应该使用mixin来防止范围问题，或者每次都使用本地范围声明另一个变量（尝试删除$currentColor:null;）

Answer 2

删除行$currentColor:null; - 无需在SASS范围内实例化其所需范围之外的变量。

$GREEN: #57da99;
$HEADER_PURPLE: #8585ff;
$BLUEISH: #4478ff;
$RED: #ff475d;
$RED2: #ff445e;

body.page-about       { $currentColor: $BLUEISH; }
body.page-browse      { $currentColor: $GREEN; }
body.page-signup      { $currentColor: $HEADER_PURPLE; }
body.page-login       { $currentColor: $HEADER_PURPLE; }
body.page-contribute  { $currentColor: $RED; }