0

現在、私の開発者の 1 人がこの少ないファイルを開発しました。

.countryFlag( @countryName :"DK"){
    content: url("/images/flags/@{countryName}.gif") no-repeat center;
}

a.flag-DK {
    .countryFlag ();
}

a.flag-DE {
    .countryFlag (DE);
}

a.flag-EE {
    .countryFlag (EE);
}

...

約20カ国と。ループまたは実行時に作成される動的な名前を使用して、これをよりスマートに行うことができるかどうか疑問に思っていました。私が欲しいものを説明する次の疑似コードを考えてみましょう:

a.flag-@{country} {
  content: url("/images/flags/@{country}.gif") no-repeat center;
}

任意の定義に単純に一致します。これにより多くの競合が発生する可能性があることは承知していますが、おそらく正規表現を介してさらに絞り込むことができますか? 理にかなっていますが、これを見つけることができませんでした。

別の方法として、ある種のループを使用して「静的」CSS クラスを作成することもできます。この疑似代替案を検討してください。

@countries: 'dk', 'de', 'uk', 'us', ...;

for(country : countries) {
    a.flag-@{country} {
        content: url("/images/flags/@{country}.gif") no-repeat center;
    }
}

したがって、事前に決定された国のリストのクラスを作成します。

これらの代替手段のいずれかが何らかの方法で利用可能ですか? または、私が見落としていた可能性のある 3 番目のオプションについてアドバイスをいただけますか? わずかな文字列の違いだけで、ほぼ同一のクラスが 20 個も定義されているのを見ると、ちょっとばかげているように感じます。CSS プリプロセッサはこれをもっと賢く行うことができなければならないと思います。

ありがとう！

4

1 に答える 1

1

Less.js の「for」スニペットにも数行のドキュメントがあります。数日前、あなたのような問題に直面していたとき、このページは非常に役に立ちました。

foreach ループで文字列として使用する値のリストを宣言するだけです。(例@list: banana, apple, pear, potato, carrot, peach;)

Less の最新バージョンを使用していることを確認してください。

于 2014-07-08T08:41:47.983 に答える