【问题标题】:Why SASS doesnt have local variables? [closed]为什么 SASS 没有局部变量? [关闭]
【发布时间】:2013-09-27 00:44:24
【问题描述】:

刚从LESS切换,发现SASS中的所有变量都是全局变量。因此,要为特定块定义特殊变量,我需要编写类似$words-that-describe-particular-block-padding: 10px; 的内容。

在所有评论中,由于 SASS 功能丰富,作者认为 SASS 比 LESS 更先进,但实际上缺少命名空间这样简单的东西会扼杀所有使用它的经验。

为什么做出这个设计决定?
我错了,因为我失踪了,全局变量更好吗?

更新:
萨斯:

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

少:

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

使用此在线编译器尝试示例:

【问题讨论】:

  • 不知道你为什么这么认为...Sass variables "变量仅在定义它们的嵌套选择器级别内可用。如果它们是在任何嵌套选择器之外定义的,它们'随处可见。”
  • @steveax 他们不能被覆盖 - 请检查帖子中的更新
  • 此行为将在 4.0 中更改,请参阅 github.com/sass/sass/issues/136。在此之前,请使用命名约定(大小写、下划线等)来区分全局变量和局部变量。

标签: css styles sass less


【解决方案1】:

这并不完全正确。如果你运行以下代码:

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

你会得到

Sass Error: Undefined variable: "$color".

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

但是,SASS 或 LESS 有很多限制。如果您对他们提供的东西不满意,我建议您查看this

【讨论】:

  • 试试这个:$var: 1px; #id1 { $var: 2px; width: $var; } #id2 { width: $var; }。在 LESS 中,这种情况将在处理时注意范围。
  • 事情应该是这样的。在#id1 中,您更改了全局变量的值。这就是为什么在 #id2 你得到 2px 而不是一个。如果你试试这个 $var: 1px; #id2 { 宽度:$var; } #id1 { $var: 2px;宽度:$var; } 你会得到 1px 的 #id2 和 2px 的 #id1。
  • 这就是在 SASS 中的工作方式,但在大多数编程语言中,这种情况的处理方式会有所不同。
  • 所以我的理解是任何 SASS 变量的有效范围是 它出现的最高级别,在 SASS 中的任何位置:(1)如果它出现在全局级别,那么每个变量的使用都是全局的。 (2) 如果它同时出现在子项和父项中,则两者的范围都是父项。 (3) 如果它出现在两个独立块中,那么变量在每个块中都是局部的。所以如果你小心点,你可以有局部变量;但是您可能会通过随后在更高级别引入相同的变量名称而无意中破坏它们。
  • 作用域与 Javascript 非常相似。
猜你喜欢
  • 2019-11-08
  • 2012-08-29
  • 2010-10-01
  • 1970-01-01
  • 1970-01-01
  • 2010-09-29
  • 1970-01-01
  • 2015-01-23
相关资源
最近更新 更多