Question

是否有SASS或LESS的替代方法可以实现模块和合理的全局范围？

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

@import "foo.scss"

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

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

@mixin bar {
    // ...
}

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

@import "foo.scss"

.bar {
    @include foo.bar;
}

换句话说：from foo import *实际上与@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();

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

2 个答案: