SCSS 变量范围答案

【问题标题】：SCSS variable scopeSCSS 变量范围
【发布时间】：2012-09-04 03:31:33
【问题描述】：

我正在将样式表从 LESS 转换为 SCSS，我对看到的变量范围感到困惑。用一个简单的例子转载：

$my-color: #000;

#logo {
    $my-color: #555;
    color: $my-color;
}

a {
    color: $my-color;
}

转换为以下 CSS：

#logo {
    color: #555555;
}

a {
    color: #555555;
}

LESS 中的等效构造将导致 a color 值为 #000，因为 #logo 范围内的变量声明将覆盖更通用的声明，但仅限于该范围内。变量作用域在 SCSS 中不是那样工作吗？有没有办法达到同样的目的？

【问题讨论】：

标签： sass

【解决方案1】：

至少从 SCSS v3.4.12 开始不再是这种情况：

现在它正确地定义了变量的范围：

输入：

$my-color: #000;

#logo {
    $my-color: #555;
    color: $my-color;
}

a {
    color: $my-color;
}

输出：

#logo {
  color: #555;
}

a {
  color: #000;
}

【讨论】：

【解决方案2】：

通读Sass variable default scope 的答案，似乎变量在SCSS 和LESS 中的工作方式不同。

在这种情况下，#logo 中 $my-color 的定义会更改全局变量的值，而在 LESS 中，它将被视为该全局变量的块本地覆盖。

我想为了达到相同的结果，我必须稍微改变结构。

【讨论】：

在我看来这很糟糕，因为你正在污染全局空间。每次进入新块时都必须想出一个新的变量名，这会导致变量名：$color、$color1、$color2 ....
很快 Sass 将拥有适当的词法作用域，并且您将能够像这样覆盖全局变量：$var: newvalue !global; -- Sass 3.3 在您覆盖没有 @987654328 的全局变量时已经给出了弃用警告@.
警告：情况不再如此。请参阅下面的答案。