Preprocesor CSS z modułami i rozsądnym zakresem?

Question

Czy istnieje alternatywa dla SASS lub LESS, która implementuje coś takiego jak moduły i globalny zasięg?

Na przykład, kiedy to zrobić w SASS (lub równoważny) Im mniej:

@import "foo.scss" 

... to popycha wszystkie wstawek, zmienne itp z importowanego pliku do zasięgu globalnym, ewentualnie nadrzędne lub kolizja z załadowanymi lub zdefiniowanymi mixinami/zmiennymi. Myślę, że to bałagan.

Chciałbym mieć coś bardziej modularnego. Wyobraźmy sobie, że foo.scss ma wstawek bar:

@mixin bar { 
    // ... 
} 

Aby skorzystać z tej mixin bym to nazwać relatywnie do przestrzeni nazw "foo". Bardziej lub tak:

@import "foo.scss" 

.bar { 
    @include foo.bar; 
} 

Innymi słowy: zamiast pracować jako ekwiwalent from foo import * w Pythonie, A @import foo naprawdę działa jak import foo.

So. Czy istnieje preprocesor CSS, który dba o takie przestrzenie nazw?

Answer 1

W LESS możesz zdefiniować swój obszar nazw w pliku, który importuje drugi.

foo.less:

.bar() { 
    // … 
} 

main.less:

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

nie wiem o Sass/SCSS.

Answer 2

I moje przestrzeni nazw modułów Sass z bezpośrednio realizujących wstawek:

@mixin MyAwesomeModule() { 

    $fontColor: red; 
    $bgColor: green; 

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

} 
@include MyAwesomeModule();