Препроцессор CSS с модулями и разумной областью?

Question

Есть ли альтернатива SASS или LESS, которая реализует что-то вроде модулей и разумной глобальной области?

Например, когда я делаю это в SASS (или МЕНЬШЕ эквивалент):

@import "foo.scss" 

... это толкает все Примеси, переменные и т.д. из импортируемого файла в глобальном масштабе, возможно перекрывая или сталкиваясь с загруженными или определенными миксинами/переменными. Я думаю, что это беспорядок.

Я хотел бы иметь что-то более модульное. Представьте себе, что foo.scss имеет подмешать bar:

@mixin bar { 
    // ... 
} 

Чтобы использовать эту подмешать я бы назвал его по отношению к «Foo» пространства имен. Более или как это:

@import "foo.scss" 

.bar { 
    @include foo.bar; 
} 

Другими словами: вместо того, чтобы работать в качестве эквивалента from foo import * в Python, @import foo будет действительно работать, как import foo.

So. Есть ли препроцессор 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();