css - 带有模块和健全范围的 CSS 预处理器？

Question

是否有替代SASS或LESS的方法来实现模块和健全的全局范围？

例如，当我在 SASS（或 LESS 等效项）中执行此操作时：

@import "foo.scss"

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

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

@mixin bar {
    // ...
}

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

@import "foo.scss"

.bar {
    @include foo.bar;
}

换句话说： a 不会像from foo import *Python 中的@import foo那样工作，而是真正像import foo.

所以。是否有一个 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。

Answer 2

我在 Sass 中命名我的模块并立即执行 mixins：

@mixin MyAwesomeModule() {

    $fontColor: red;
    $bgColor: green;

    .someDiv {
        color: $fontColor;
        background: $bgColor;
    }

}
@include MyAwesomeModule();