具有模塊和理智範圍的CSS預處理器？

是否有替代SASS或LESS，實現類似模塊和健全的全球範圍？具有模塊和理智範圍的CSS預處理器？

例如，我做的時候在這個SASS（或大致相當於）：

@import "foo.scss"

...它推動所有的混入，變量等導入文件到全球範圍內，可能會覆蓋或與加載或定義的混合變量/變量相沖突。我認爲這是一團糟。

我想要更多模塊化的東西。想象一下，foo.scss有一個混合bar：

@mixin bar { 
    // ... 
}

要使用這個mixin的我比較叫它爲「foo」的命名空間。更或者是這樣的：

@import "foo.scss" 

.bar { 
    @include foo.bar; 
}

換言之：不是作爲from foo import *在Python等效工作，一個@import foo會真的這樣import foo。

所以。是否有一個CSS預處理器關心這樣的命名空間？

來源

2012-04-15 moraes

我不知道它是否支持命名空間，但看的Stylus http://learnboost.github.com/stylus/，另一個明顯偉大的CSS預處理器（從未使用它），你可以很容易地擴展 – 2012-04-16 07:04:18

你可以把你的較少的文件包裝在一個mixin中（就像你在javascript中的命名空間） eg （）{ //變量不泄漏！ } .namespaced（）; – 2012-04-19 12:35:41

@LukePage該功能很整潔，但可能有兩個文件具有相同的'.namespace'。爲了實現真正的模塊化，來自導入文件的所有名稱不應該放入全局範圍。 – moraes 2012-04-21 09:30:54

不過您可以在導入其他文件的文件中定義您的名稱空間。

foo.less：

.bar() { 
    // … 
}

main.less：

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

不知道SASS/SCSS。

來源

2012-07-05 09:20:14 dave

我命名空間我的無禮模塊，立即執行混入：

@mixin MyAwesomeModule() { 

    $fontColor: red; 
    $bgColor: green; 

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

} 
@include MyAwesomeModule();

來源

2013-09-16 13:50:14 owzim

具有模塊和理智範圍的CSS預處理器？

回答

相關問題