擴展Fontello圖標

我試圖擴展由Fontello生成的圖標僞類在較少。擴展Fontello圖標

趁現在這個工程：

.icon-extended:before:extend(.icon-caret-n:before) {}

這不：

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

不明白爲什麼？

在這種情況下，li:before將從.icon-ok:before獲得內容定義，但不是來自[class^="icon-"]:before, [class*=" icon-"]:before的一般樣式。

看起來像一個錯誤給我？

來源

2013-11-27 Birgit Zimmermann

我不認爲這是一個錯誤，最多「未實現」的功能。 'Extend'不會查找指定選擇器的任何「超集」。出於同樣的原因，它不會擴展一個簡單的'*'選擇器（它也是'.icon-ok：before'的「超集」）。然而，考慮到有'extend（... all）'選項可以實現某種「超集匹配」（僅適用於不同類型的「超集」），所以至少考慮這個新的擴展。我建議你寫一個專門的問題報告/功能請求[這裏]（https://github.com/less/less.js/issues）。 –

你的第一個案例...

.icon-extended:before:extend(.icon-caret-n:before) {}

...要擴展的東西，有一類本身命名.icon-extended使類也匹配選擇[class^="icon-"]，[class*=" icon-"]，因此爲什麼它的工作原理（其在這種情況下與:extend無關）。

你的第二個案例...

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

...要擴展的東西，沒有在其選擇ul.checked li注意到一個icon-值，所以不會不應與任何[class^="icon-"] ，[class*=" icon-"]。現在您的擴展不會更改類名稱，而只是將選擇器添加到定義.icon-ok:before（僅限於該代碼塊）的代碼塊中。 LESS擴展名純粹看選擇器字符串.icon-ok:before，並且在知道這樣的選擇器將匹配其他選擇器字符串[class^="icon-"],[class*=" icon-"]（這基本上是七相最大的評論是關於什麼的）時不是「智能的」。所以你必須明確地做，最好是這樣：

ul.checked li:before:extend(
    .icon-ok:before, 
    [class^="icon-"]:before, 
    [class*=" icon-"]:before) { 
    color: #4fa33b; 
}

來源

2013-11-29 13:40:46 ScottS

你的例子會導致一個錯誤（'＆}'在＆擴展（...）'由於某種原因是非法的）之後。其中一個（https://gist.github.com/seven-phases-max/7727889#file-20239175-less）將會起作用。 –

@ seven-phases-max：謝謝。 less2css.org網站已關閉，這是我通常測試我所有代碼的地方，所以我沒有機會測試它。 – ScottS

你也可以使用http://winless.org/online-less-compiler進行測試（儘管它只提供LESS編譯器的最新版本） –

擴展Fontello圖標

回答

相關問題