具有模块和理智作用域的 CSS 预处理器？

Question

有没有SASS的替代品？或 LESS实现诸如模块和健全的全局范围之类的东西？

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

@import "foo.scss"

...它将导入文件中的所有混合、变量等推送到全局范围，可能会覆盖或与加载或定义的混合/变量发生冲突。我认为这是一团糟。

我想要一些更模块化的东西。想象一下 foo.scss有一个mixin bar :

@mixin bar {
    // ...
}

要使用这个 mixin，我会相对于“foo”命名空间来调用它。更多或像这样:

@import "foo.scss"

.bar {
    @include foo.bar;
}

换句话说:而不是相当于 from foo import *在 Python 中，一个 @import foo真的会像import foo一样工作.

所以。有没有像这样关心 namespace 的 CSS 预处理器？

Answer 1

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

foo.less:

.bar() {
    // …
}

main.less:

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

不了解 SASS/SCSS。