變量和較少的CSS，這是可能的，或者我怎麼能實現類似的東西？

我有兩個不同的變量重複的代碼塊。這段代碼重複了很多次，所以我想幫助管理這個樣式表，我將它轉換爲LESSCSS。變量和較少的CSS，這是可能的，或者我怎麼能實現類似的東西？

我是LESS CSS的新手，但遇到了編譯錯誤，所以我想我正在嘗試做的事情不可能以他們的方式接近它。

.item(@name,@loc) { 
    @name .icon { background: url(..) -24px @loc no-repeat; } 
    .theme-purple @name .icon { background: url(..) 0 @loc no-repeat; } 
    .theme-green @name .icon { background: url(..) -48px @loc no-repeat; } 
    .theme-yellow @name .icon, 
    .theme-orange @name .icon { background: url(..) -72px @loc no-repeat; } 
    .theme-red @name .icon { background: url(..) -96px @loc no-repeat; } 
} 

.item('type',-24px);

是這樣的可能嗎？

來源

2012-03-28 kisonay

你很近。第一個問題是你使用變量。你需要看看@arguments。我不是100％清楚你所要完成的（可能爲精靈一些代碼）是什麼，但讓我給你舉個例子：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { 
    box-shadow: @arguments; 
    -moz-box-shadow: @arguments; 
    -webkit-box-shadow: @arguments; 
} 

.box-shadow(2px, 5px);

您設定的變量，其次是它們的默認，如果他們不指定。然後你使用@arguments將它們放到你的混合中。由於這只是一個背景圖片，你只會有一個。然後，您將該mixin應用於特定的選擇器。

它看起來像你試圖把mixin作爲一個mixin使用，這是不可能的。出於各種原因，您也不能在選擇器內的選擇器內放置變量。最重要的是範圍。變量是LESS中的常量，因此一旦設置了本地全局變量，它就不能被更改。

來也許不喜歡這樣它會更容易：

.sprite (@path: url(..), @loc1: 0, @loc2: 0, @repeat: no-repeat;) { 
     background: @arguments;   
} 

.foo { 
     .sprite('url(..)', -96px, -24px); 
}

應該輸出：

.foo { 
     background: url(..) -96px -24px no-repeat; 
}

請記住，你不能跳過更少的參數的第一個參數，所以你將永遠需要在這個例子中聲明url。

來源

2012-03-29 06:41:04

變量和較少的CSS，這是可能的，或者我怎麼能實現類似的東西？

回答

相關問題