CSS Preprozessor mit Modulen und vernünftigem Umfang?

Question

Gibt es eine Alternative zu SASS oder LESS, die so etwas wie Module und globalen Geltungsbereich implementiert?

Zum Beispiel, wenn ich dies in SASS tun (oder die LESS-Äquivalent):

@import "foo.scss" 

... es schiebt alle Mixins, Variablen, usw. aus der importierten Datei in den globalen Bereich, möglicherweise überschrieben oder kollidieren mit geladenen oder definierten Mixins/Variablen. Ich denke, das ist ein Durcheinander.

Ich hätte gerne etwas Modulares. Stellen Sie sich vor, dass foo.scss eine mixin hat bar:

@mixin bar { 
    // ... 
} 

dieses mixin nutzen zu können, ich es in Bezug auf den „foo“ Namespace nennen würde. Mehr oder so:

@import "foo.scss" 

.bar { 
    @include foo.bar; 
} 

Mit anderen Worten: Statt als äquivalent from foo import * in Python zu arbeiten, wäre ein @import foo wirklich wie import foo arbeiten.

So. Gibt es einen CSS-Präprozessor, der sich um solche Namespaces kümmert?

Answer 1

In LESS können Sie Ihren Namespace in der Datei definieren, die den anderen importiert.

foo.less:

.bar() { 
    // … 
} 

main.less:

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

Sie wissen nicht, über SASS/SCSS.

Answer 2

ich meine Namespace-Module in Sass mit sofort Ausführung Mixins:

@mixin MyAwesomeModule() { 

    $fontColor: red; 
    $bgColor: green; 

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

} 
@include MyAwesomeModule();