sass - SCSS 变量范围

Question

我正在将样式表从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中不是那样工作吗？有没有办法达到同样的目的？

score 26 · Accepted Answer

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

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

输入：

$my-color: #000;

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

a {
    color: $my-color;
}

输出：

#logo {
  color: #555;
}

a {
  color: #000;
}

score 10 · Accepted Answer

通读 Sass 变量默认范围的答案，似乎变量在SCSS和LESS中的工作方式不同。

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

我想我必须以不同的方式组织事情才能达到相同的结果。

2 回答 2