CSS preprocessor with modules and sane scope?

Question

Is there an alternative to SASS or LESS that implements something like modules and sane global scope?

For example, when I do this in SASS (or the LESS equivalent):

@import "foo.scss"

...it pushes all mixins, variables, etc from the imported file to the global scope, possibly overriding or colliding with loaded or defined mixins/variables. I think this is a mess.

I'd like to have something more modular. Imagine that foo.scss has a mixin bar:

@mixin bar {
    // ...
}

To use this mixin I'd call it relatively to the "foo" namespace. More or like this:

@import "foo.scss"

.bar {
    @include foo.bar;
}

In other words: instead of working as the equivalent of from foo import * in Python, a @import foo would really work like import foo.

So. Is there a CSS preprocessor that cares about namespaces like this?

Answer 1

In LESS you can define your namespace in the file which imports the other.

foo.less:

.bar() {
    // …
}

main.less:

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

Don't know about SASS/SCSS.

Answer 2

I namespace my modules in Sass with immediately executing mixins:

@mixin MyAwesomeModule() {

    $fontColor: red;
    $bgColor: green;

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

}
@include MyAwesomeModule();