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那样工作吗？有没有办法实现同样的事情？

Answer 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;
}

可以试用:http://sassmeister.com/

Answer 2

通过阅读Sass变量默认范围的答案,似乎变量在SCSS到LESS中的工作方式不同.

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

我想我必须以不同的方式构建一些东西才能获得相同的结果.