¿Preprocesador CSS con módulos y alcance seguro?

Question

¿Hay una alternativa a SASS o LESS que implemente algo así como módulos y alcance global?

Por ejemplo, cuando hago esto en SASS (o el equivalente MENOS):

@import "foo.scss" 

... empuja todos mixins, variables, etc., del fichero importado al ámbito mundial, posiblemente anulando o colisionando con mixins/variables cargadas o definidas. Creo que esto es un desastre.

Me gustaría tener algo más modular. Imagínese que tiene un mixin foo.scssbar:

@mixin bar { 
    // ... 
} 

Para utilizar este mixin lo llamaría relativamente al espacio de nombres "foo". Más o como esto:

@import "foo.scss" 

.bar { 
    @include foo.bar; 
} 

En otras palabras: en lugar de trabajar como el equivalente de from foo import * en Python, un @import foo realmente funcionaría como import foo.

So. ¿Hay un preprocesador CSS que se preocupe por los espacios de nombres como este?

Answer 1

En LESS puede definir su espacio de nombre en el archivo que importa el otro.

foo.less:

.bar() { 
    // … 
} 

main.less:

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

no sabe acerca de SASS/SCSS.

Answer 2

I espacio de nombres mis módulos en Sass con mixins inmediata ejecución:

@mixin MyAwesomeModule() { 

    $fontColor: red; 
    $bgColor: green; 

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

} 
@include MyAwesomeModule();