簡略化したミックスインとパラメータ

私は、私はそれをクラス名に基づいて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

これは時間の無駄です。このプロセスを簡素化する方法はありますか？私は各クラスにコンパクトで小さなアイコンアサイナを持たせたいと思っています。ありがとう！

出典

2016-04-04 Jonah M

かなりわかりやすいようです。たぶん[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を使用することですが、それは過度に見えます。 –

アレイをループすると役立ちます。

控除：

.icon-finder(@url){ 
    background-image: url("..images/icons/backend/@{url}-icon-36.png"); 
    background-position: center center; 
} 

@icons: analytics, logout; 

.make-icons(@i: length(@icons)) when (@i > 0) { 
    .make-icons(@i - 1); 

    @icon: extract(@icons, @i); 
    [email protected]{icon} { 
     .icon-finder(@icon); 
    } 
} 

.make-icons(); // run the mixin

のCss：

.analytics { 
    background-image: url("..images/icons/backend/analytics-icon-36.png"); 
    background-position: center center; 
} 
.logout { 
    background-image: url("..images/icons/backend/logout-icon-36.png"); 
    background-position: center center; 
}

おかげto。

出典

2016-04-04 12:18:09 3rdthemagical

簡略化したミックスインとパラメータ

答えて

関連する問題