在LESS中使用mixin命名參數作爲僞選擇器

我的想法是創建一個LESS mixin，它可以爲我的頁面中的任何元素添加僞元素:before或:after。在LESS中使用mixin命名參數作爲僞選擇器

我試圖使用LESS mixins的「命名參數」來創建一個通用混入，其中用戶可以指定僞元素應該是:before還是:after。

當我編譯時，我得到一個錯誤：「無法識別的輸入」。

這裏是我的代碼：

.setInlineIcon(@iconx: 0; @icony: 0; @pos: before; @margin: 0; @margindir: right) { 
    &:@{pos} { 
    .setStructure(@h: 16px; @w: 16px; @d: inline-block; @va: middle); 
    .getIcon(@iconx; @icony); 

    content:""; 
    [email protected]{margindir}: @margin; 
    } 
}

凡.setStrucutre和.getIcon是兩個已經存在的和功能的混入。你能發現有什麼問題嗎？

是否因爲我不能以這種方式使用變量作爲選擇器？

來源

2014-04-16 Nicolas Carteron

是的，這是已知的問題與當前版本的少。 '：'不被識別爲有效的選擇器標識符。解決方法是在選擇器插值之前將'：'連接到僞選擇器字符串，例如：'@name：〜'：@ {pos}'; ＆@ {name} {...}'。 –

@ seven-phases-max非常感謝您的評論，您的解決方法奏效！似乎我對我的margindir也有同樣的問題，但是，只有我評論這條線時纔有效。嘗試相同的解決方法，但它不會工作。 –

'margin - @ {margindir}：@margin;'是正確的，只要您使用實際支持此功能的編譯器（Less or less.php> = 1.6.0），它應該可以正常工作。 –

:單獨不被識別爲有效的選擇器標識符。解決方法是選擇插補前將其串連到標識符：

.mixin(@pos) { 
    @name: ~':@{pos}'; 
    &@{name} { 
     /* ... */ 
    } 
} 

usage { 
    .mixin(before); 
}

來源

2014-09-14 01:56:16

+1。目前是否有計劃在2.0.0中解決這個問題？ – Harry

不，據我所知（可能被認爲太難以打擾）。如果你認爲這很重要，我想你可以開一個問題。 –

在LESS中使用mixin命名參數作爲僞選擇器

回答

相關問題