具有模块和理智范围的CSS预处理器？

Question

是否有SASS或LESS的替代方案可以实现类似模块和理智的全局范围？

例如,当我在SASS(或LESS等效物)中执行此操作时:

@import "foo.scss"

...它将所有mixins,变量等从导入的文件推送到全局范围,可能覆盖或与加载或定义的mixins /变量冲突.我认为这是一团糟.

我想要更模块化的东西.想象一下,foo.scss有一个混合bar:

@mixin bar {
    // ...
}

要使用这个mixin我会相对于"foo"命名空间调用它.更多或像这样:

@import "foo.scss"

.bar {
    @include foo.bar;
}

换句话说:不是像from foo import *在Python中那样工作,而是@import foo真的会像import foo.

所以.是否有一个关注像这样的名称空间的CSS预处理器？

Answer 1

在 LESS 中，您可以在导入另一个名称空间的文件中定义您的名称空间。

\n\n

foo.less：

\n\n

.bar() {\n    // \xe2\x80\xa6\n}\n

\n\n

主要.较少：

\n\n

.namespace {\n    @import "foo";\n}\n// To use .bar-Mixin prefix namespace:\nbody {\n    .namespace .bar();\n    // .bar(); would throw an error\n}\n

\n\n

不了解 SASS/SCSS。

\n