为什么SASS没有局部变量？

Question

我刚从LESS转过来，发现在SASS中所有变量都是全局的。因此，要为特定块定义一个特殊变量，我需要编写类似于$words-that-describe-particular-block-padding: 10px;的东西。

在所有评论中，作者都认为SASS比LESS更先进，因为它具有更丰富的功能，但实际上，缺乏像命名空间这样简单的东西会破坏使用体验。

为什么要做出这个设计决策？
我错了吗？全局变量比我错失的原因更好吗？

更新:
SASS:

$var: 1px;
#id1 {
$var: 2px;
width: $var;
}
#id2 {
width: $var;
}

LESS:

@var: 1px;
#id1 {
@var: 2px;
width: @var;
}
#id2 {
width: @var;
}

可以使用以下在线编译器尝试示例代码：

• http://sass-lang.com/try.html
• http://less2css.org/

- Gill Bates

---

不确定你为什么持有这样的想法... Sass变量 "变量只在定义它们的嵌套选择器级别内可用。如果它们在任何嵌套选择器之外定义，它们将在所有地方都可用。" - steveax

@steveax 他们无法被覆盖 - 请检查帖子中的更新。 - Gill Bates

这种行为将在4.0中更改，请参见https://github.com/sass/sass/issues/136。在那之前，请使用命名约定（大小写，下划线等）来区分全局和局部变量。 - Joó Ádám

Answer 1

那并不完全正确。如果您运行以下代码：

.header {
   $color: #000;
   background: $color;
}
.footer {
   background: $color;
}

你将会获得

Sass Error: Undefined variable: "$color".

因此，这个颜色变量根本不是全局的。它仅在其定义的上下文中可用。

然而，SASS或LESS有很多限制。如果你对它们提供的东西不满意，我建议你检查 这个。

- Krasimir

---

试一下这个：$var: 1px; #id1 { $var: 2px; width: $var; } #id2 { width: $var; }。在LESS中，这种情况将会注意到作用域。 - Gill Bates

这就是应该的工作方式。在 #id1 中，您更改了全局变量的值。这就是为什么在 #id2 中您得到 2px 而不是 1px。如果您尝试这样 $var: 1px; #id2 { width: $var; } #id1 { $var: 2px; width: $var; }，那么您将会得到 #id2 的 1px 和 #id1 的 2px。 - Krasimir

这就是SASS应该运作的方式，但在大多数编程语言中，这种情况会有不同的处理方式。 - Gill Bates

我的理解是，任何SASS变量的有效范围都是它出现的最高级别，无论在SASS的哪个位置：(1)如果它出现在全局级别，则该变量的每个使用都将是全局的。(2)如果它同时出现在子级和父级中，则两者的范围都是父级。(3)如果它出现在两个独立的块中，则该变量在每个块内部是局部的。因此，如果你小心一点，你可以有局部变量；但是，如果随后在更高的级别引入相同的变量名，你可能会无意中破坏它们。 - phils

作用域与Javascript非常相似。 - Jake