CSS preprocessor with modules and sensible scope?

Question

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

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

@import "foo.scss"

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

I would like to have something more modular. Imagine what foo.scssmixin has bar:

@mixin bar {
    // ...
}

To use this mixin, I would name it relative to the namespace "foo". More or like this:

@import "foo.scss"

.bar {
    @include foo.bar;
}

In other words: instead of working as an equivalent from foo import *in Python, it @import fooreally works like import foo.

So. Is there a CSS preprocessor that is interested in such namespaces?

Answer 1

In LESS, you can define your namespace in a file that another imports.

foo.less:

.bar() {
    // …
}

main.less:

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

I do not know about SASS / SCSS.

Answer 2

I name my modules in Sass with immediate execution of mixins:

@mixin MyAwesomeModule() {

    $fontColor: red;
    $bgColor: green;

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

}
@include MyAwesomeModule();