使用Font-awesome和LESS應用語義原則？

我試圖按照我使用Bootstrap的相同方式使用Font-awesome，按照網頁設計的語義原則（不會在我的HTML標記中放置數十億個非語義類），使用LESS。使用Font-awesome和LESS應用語義原則？

看來，這是不可能的：圖標定義是這樣的：

[email protected]{fa-css-prefix}-home:before { content: @fa-var-home; }

這不是一個mixin定義，但經典的CSS規則，建立以較少的變量。

所以，我不能做這樣的聲明：

.meaning-class-name { 
    .fa-home; 
}

Lessc抱怨.fa-home是不確定的。

這是一種避免腐爛我的HTML代碼的方法嗎？有沒有辦法將一個類的屬性更少地指定給另一個類？

謝謝！

來源

2014-09-04 Pierre-Yves Le Dévéhat

參見http://stackoverflow.com/a/20707100和http://stackoverflow.com/a/19603404 [LESS混入可變類名（的 – 2014-09-04 18:58:00

可能重複的HTTP ：//www.stackoverflow.com/questions/19602812/less-mixin-a-variable-class-name） – 2014-09-04 18:58:42

我發現，更好的解決方案是根據此模式來修改font-awesome/less/icons.less和重寫的聲明：

[email protected]{fa-css-prefix}-home { &:before { content: @fa-var-home; } }

它類似於由引導用的glyphicons.less。

PS：在Eclipse中，這可以迅速地查找完成/替換工具：

查找：

\[email protected]\{fa-css-prefix\}-([-0-9a-zA-Z]+):before \{ content: @([-0-9a-zA-Z]+); \}

替換：

[email protected]{fa-css-prefix}-$1 { &:before { content: @$2; } }

和

查找：

\[email protected]\{fa-css-prefix\}-([-0-9a-zA-Z]+):before,

替換：

[email protected]{fa-css-prefix}-$1,

來源

2014-09-05 08:05:14

這樣做的竅門，但你需要爲每個新的FA版本做到這一點。 – 2014-09-05 08:06:35

所以，順便說一句，從技術上來說，更容易創建我們自己的mixin w/o修改任何FA來源。 mixin就像[this]一樣簡單（https://gist.github.com/seven-phases-max/73bd98514b4da5a5c421#file-25668704-less）（所有圖標都有一個mixin）。 – 2014-09-05 08:24:28

您的解決方案也很好，但有時，'@ fa-var-something'變量與faont-awesome類不完全匹配。例如：'.fa-bar-chart'指向'@ fa-var-bar-chat-o'變量。您的解決方案可以防止讀取字體超棒的圖標描述網頁來編寫您的定義。 – 2014-09-05 08:44:21

使用Font-awesome和LESS應用語義原則？

回答

相關問題