2

SASSでこれを行うことができることを知っています

@pxtoem(@target, @context) {
 (@target/@context)+0em }

.something{
  font-size: @pxtoem(24, 16);
}

これは.lessで可能ですか? 申し訳ありませんが、ここでの私の理解はかなり限られていますが、.less は計算が css 宣言を出力することを期待しているように思えますか?

明確にするために、これを使用する必要があるたびに mixin を使用したくありません (背景の位置、フォントサイズ、行の高さなど)。

ありがとう

4

1 に答える 1

2

はい、ミックスインから、LESS はCSS 宣言または変数を出力しますが、値は出力しません。

あなたの状況に最適

必要なものを取得する最も簡単な方法は、ミックスインを避け、通常の操作とunit()関数を使用することです。

.something {
    font-size: unit(24 / 16, em);
}

出力:

.something {
  font-size: 1.5em;
}

変数の出力

変数は出力できますが、通常のスコープと LESS 変数の「定数」型の動作で引き続き機能します。したがって、次のコードを検討してください。1 回使用すると正常に動作する (#1) ことを示していますが、2 回使用すると両方の項目に対して計算された最終的な値しか得られない(#2) ため、それを避けるために、クラス ブロックごとに複数回呼び出す必要がある場合は、そのクラス内でミックスインを深刻にネストする必要があります (#3)。

.divideToEm(@target, @context) {
   @divideToEm: (@target / @context) + 0em;
}

.something { /* #1 */
   .divideToEm(24, 16);
   font-size: @divideToEm;
}

.somethingElse { /* #2 */
   .divideToEm(24, 16);
   font-size: @divideToEm;
   .divideToEm(12, 24);
   margin-right: @divideToEm;
}

.somethingElse2 { /* #3 */
   .setSize() {
   .divideToEm(24, 16);
    font-size: @divideToEm;
   }
   .setMargin() {
   .divideToEm(12, 24);
   margin-right: @divideToEm;
  }
  .setSize();
  .setMargin();
}

出力:

.something {
  font-size: 1.5em;
}
.somethingElse {
  font-size: 0.5em; /* <-- probably NOT expected */
  margin-right: 0.5em;
}
.somethingElse2 {
  font-size: 1.5em;
  margin-right: 0.5em;
}
于 2013-02-08T17:19:52.043 に答える