LESS變量插值

我試圖通過使用函數和變量插值來使我的CSS更加簡化，比我已經使用的LESS更少。直到我看了一下Hover.css文件，我完全不知道變量插值，這對我爲什麼現在搞砸了並不感到驚訝。LESS變量插值

我正在研究Reddit來製作flair系統，並且我遇到了使用可變插值的問題。

我目前使用下面的測試：

.flair.flair-one { color: red; } 
.flair.flair-two { color: green; } 
.flair.flair-three { color: blue; } 

.custom(@a; @b; @c) { 
    &::before { [email protected]{a}; } 
    [email protected]{b}; 
    &::after { [email protected]{c}; } 
} 

.this-flair { 
    .custom(one; two; three); 
}

這就是我在做什麼的基本結構。在線編譯器中測試時，.this-flair不起作用。

有人能告訴我我能做些什麼來解決這個問題嗎？我正在瀏覽LESS函數，看起來好像這是正確的方法。

來源

2015-05-22 Spedwards

我不認爲插值適用於mixin調用。 – SLaks

正如SLaks已經說過的，我認爲這不會起作用。根據您的需要，您可以嘗試使用規則集和選擇器形式，如[本答案]（http://stackoverflow.com/questions/25986070/use-function-mixin-in-less-selector/25986681#25986681）。 – Harry

@Harry那最終會比我現在所做的更復雜更長。 – Spedwards

正如上面評論中所提到的，您不能插入mixin或函數調用。乍一看，參數混合（與模式匹配）是你實際需要用於這樣的片段：

.flair-flair(one) {color: red} 
.flair-flair(two) {color: green} 
.flair-flair(three) {color: blue} 

.custom(@a, @b, @c) { 
    .flair-flair(@b); 
    &::before {.flair-flair(@a)} 
    &::after {.flair-flair(@c)} 
} 

.this-flair { 
    .custom(one, two, three); 
}

來源

2015-05-22 06:53:37

不錯的選擇。有些東西告訴我，OP可能會試圖重新使用這個mixin用於多個其他* -one，* -two選擇器。 – Harry

@哈里，可能。但是我敢肯定，如果他表現出更大的用例，我將能夠爲它製作一個基於mixin的等價物（唯一的展示瓶塞可能是一些冗長/非常乾的代碼）。 –

回答

相關問題