1

私のサイトには、次のような font-size のグローバル変数があります。

@default-fontsize : 12px;

今日、私のプロジェクトはアラビア語と中国語でもあり、これら 2 つのサイトのフォント サイズを 2px 大きくする必要があることを知りました。その結果、次のようになります。

@default-fontsize : 14px;

変数を変更したくないので、body タグに ID を付けました。これを実行したいのですが、うまくいきません。

#foreign-language { font-size: (@default-fontsize + 2); }

誰でもこれに対する解決策を知っていますか?

4

1 に答える 1

1

私があなたを正しく理解しているなら、あなたは本当に id をターゲットにしてサイズを変更したくありません。これは元のコードです...

#foreign-language { font-size: (@default-fontsize + 2); }

... css を次のように生成することにより、次のようになります。

#foreign-language {
  font-size: 14px;
}

あなたが本当に望んでいるのは、を変更し@default-fontsizeて、LESSコード全体に伝播することだと思います。body現在、ID を使用してこれを行うことはできません。コードが要素の ID を参照している時点で、LESS は既に静的 CSS にコンパイルされているためです。コンパイル段階で、ブラウザに外国語で準備された CSS のセットを供給するかどうかを事前に知っておく必要があります。

これで、コードを変更するかどうかがわかったら、値を変更するように指示できるように、コードを柔軟にすることができます。ミックスインを使用すると、次のようなことができます。

.setFontSize(@addSize: 0) { 
  @default-fontsize: 12px + @addSize;
}

次に、扱っている言語セットに応じて、次の 2 つのうちの 1 つだけを呼び出します。

.setFontSize(); //do this normally
.setFontSize(2); //do this to increase it for those you need to

次に、必要な場所で変数を使用します。

body {
  font-size: @default-fontsize;
}

foreign-language繰り返しますが、これは、ボディにIDがあるかどうかに基づいて、LESS を使用して「その場で」実行できるものではありません。代わりに、外国語を扱っていることがわかっている場合は、LESS に別の方法でコンパイルするように指示する必要があります。次のようなグローバル変数を設定できます。

@addFontSize: 0; //change to 2 when dealing with a foreign language

そして、次のように mixin を 1 回呼び出すだけです。

.setFontSize(@addFontSize); //will change based off your global variable setting
于 2013-03-14T22:38:47.753 に答える