2
処理されたCSSは簡潔であると思われますか?簡略化したミックスインとパラメータ
私は、私はそれをクラス名に基づいてURLを割り当てます。このクラスでは<span class="icon-login">
を使用して、ボタンのアイコンライブラリを構築しようとしています。私の少ないコードのミックスインは次のとおりです。
.icon-finder(@url){
background-image: url("..images/icons/backend/@{url}-icon-36.png");
background-position: center center;
}
@url
パラメータは、私の資産にアイコン名をフェッチします。しかし、このミックスインを使用するには、インスタンスのロードを作成する必要があります。
.icon-analytics{
.icon-finder(analytics);
}
.icon-logout{
.icon-finder(logout); // Pointing to logout.png
}
etc etc
これは時間の無駄です。このプロセスを簡素化する方法はありますか?私は各クラスにコンパクトで小さなアイコンアサイナを持たせたいと思っています。 ありがとう!
かなりわかりやすいようです。たぶん[Font Awesome](https://fortawesome.github.io/Font-Awesome)のやり方を見てみましょうか? – Steve
あなたは[this](http://lesscss.org/less-preview/#%7B%22less%22%3A%22%40icons%3A%20analytics%2C%20logout%2C%20login%3B)のようなものをお探しですか? %5Cn.icon-finder(%40index)%20when%20(%40index%20%3E%200)%7B%5Cn%20%20%40icoType%3A%20extract(%40icons%2C%20%40index)%3B (%5C%22..images%2Ficons%2Fbackend%2F%40%20%20%20%20%20%20%20% 7BicoType%7D-icon-36.png%5C%22)%3B%5Cn%20%20%20%20バックグラウンド%3A%20Center%20Center%3B%5Cn%20%20%7D%5Cn%20%20ループを使って.icon-finder(%40index%20-%201)%3B%5Cn%7D%5Cn.icon-finder(長さ(%40icons))%3B%22%7D) – Harry
ループは解決策ですが、CSS作成時にHTMLが読み込まれないため、少なくても "analytics"、 "logout"という名前は宣言しないでください。別の解決策は、JavaScriptを使用することですが、それは過度に見えます。 –