較少的css調用一個循環的動態變量

我在做什麼： 我有（現在）7種顏色作爲變量。我希望能夠在幾個地方使用它們並迭代它們。較少的css調用一個循環的動態變量

這就是我不工作

@color1:#06A1C0; 
@color2:#8F4F9F; 
@color3:#ED1D24; 
@color4:#5A9283; 
@color5:#B38C51; 
@color6:#EC008C; 
@color7:#8F4F9F; 

@iterations: 8; 
.mixin-loop (@index) when (@index > 0) { 
[email protected]{index}:hover{ 
    @tmp: ~'@color'; 
    @num: @index; 
     color: @[email protected]; 
    } 

.mixin-loop(@index - 1); 
} 
.mixin-loop (0) {} 
.mixin-loop(@iterations);

我需要什麼 我想這個結果

.color1:hover{color#06A1Co} 
.color2:hover{color#8F4F9F} 
etc..

什麼問題？ 我找不到一種方法來評估@ tmp @ num來獲取實際變量。

UPDATE 下面是Ash Hitchcock提供的完美答案。

來源

2013-08-16 Dio Vayne

我剛纔一直在嘗試用較少的方法來做同樣的事情。我想出了一個解決方案是使用一個Parametric Mixin創建（定義）變量，請參閱更新〔實施例：

@color1:#06A1C0; 
@color2:#8F4F9F; 
@color3:#ED1D24; 
@color4:#5A9283; 
@color5:#B38C51; 
@color6:#EC008C; 
@color7:#8F4F9F; 

@iterations: 7; 

.define(@var) { 
    @colorSet: '[email protected]{var}'; 
} 


.mixin-loop (@index) when (@index > 0) { 
[email protected]{index}:hover{ 
    .define(@index); 
    color: @@colorSet; 
    } 

.mixin-loop(@index - 1); 
} 
.mixin-loop (0) {} 
.mixin-loop(@iterations);

希望這有助於。

來源

2013-08-17 14:40:31

非常感謝sooo！這完全是我在找的東西。 –

謝謝你。我可以修改這個結合少文檔中的示例列循環來編譯基於定義數量的斷點的嵌套數字列http://codepen.io/onebitrocket/pen/zFwci – onebitrocket

-1

爲什麼不在你的CSS文件中使用它們？你爲什麼在你的文件中嘗試它們？它不是一個好主意。
對每個DIV使用CSS都不錯。給它一個類的代碼像：

<div class='@if(condition == true) {"thisclass"} else {"thatclass"}'></div>

而只是使用一個CSS的所有條件。那很簡單。

來源

2013-08-16 11:30:59

因爲我不使用實時編譯器腳本。上傳前我在本地編譯少量文件。 –

那麼爲什麼不使用簡單的div，使用簡單的類或ID並將它們放在if else塊中？這不是很簡單嗎？ –

豐富的單詞使用意味着你是正確的，但我想了解如何使用LESS來做到這一點。我喜歡我可以製作動態類的方法，但我想獲得相應變量的參考。 –

較少的css調用一個循環的動態變量

回答

相關問題