3

数値に単位が少ないかどうかを確認するにはどうすればよいですか? 次よりも短い方法が必要です。

.margin(@i) when (isnumber(@i)) and not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) {
  ...
}

私when not (isunit(@i))はそのトリックを行うと思ったが、これはうまくいかない...

私の目標は、デフォルトの単位を使用し、「.font-size(10)」のような単位のない関数を可能な限り使用することです。デフォルトの単位は、値に単位がない場合にのみ使用する必要があります。「.font-size(2em)」のような単位がある場合、値はその単位を保持します。デフォルトの単位が "rem" であるか、単位として rem が使用されている場合、関数は rem プロパティ (古いブラウザー) の前にピクセル値を追加し、rem 値を計算する必要があります。

".font-size(5)" は以下を出力するはずです: (@default-unit: rem の場合)

font-size: 5px;
font-size: 0.5em;

私はこれを次の機能で完全に動作させました:

.font-size(@i) when (isunit(@i,rem)) {
  font-size: unit(@i*10,px);
  font-size: @i;
}

.font-size(@i) when (ispixel(@i)), (ispercentage(@i)), (isem(@i)), (@i = auto) and not (isunit(@i,rem)) and not (@i = n) {
  font-size: @i;
}

.font-size(@i) when not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) and (@unit = rem) and not (@i = n) {
  font-size: unit(@i,px);
  font-size: unit(@i/10,rem);
}

.font-size(@i) when not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) and not (@unit = rem) and not (@i = n) {
  font-size: unit(@i,px);
}

私が達成したいことには少し多すぎるようです...これはもっと短くできますか？

編集: Scotts の答えはまさに私が探していたものです。「.margin(5,10,0,8px)」のような 4 つの値を使用したくない場合は、必要な 4 つの関数を呼び出します: .margin-top( ), .margin-right(), ..." これは正常に機能しますが、レンダリングされた css はかなり長いです... css の短縮形をレンダリングする最良の方法は何かと考えていました: "margin: 0.5rem,1rem ,0,8px;". Scotts 関数を使用して、2 つの値の例を作成してみました。

.background-position(@x,@y) {

  .runChecksx() when not (isnumber(@x)) {
    @baseOutputx: @x;
  }
  .runChecksx() when (isnumber(@x)) {
    @tempbaseOutputx: (@x * unit(1, @unit));
    @passedRemx: isunit(@x, 'rem');
    .checkRemx() when not (isunit(@tempbaseOutputx, 'rem')) and not (@passedRemx) {
      @baseOutputx: (@x * unit(1, @unit));
    }
    .checkRemx() when (isunit(@tempbaseOutputx, 'rem')), (@passedRemx) {
      @remBaseAdjx: unit(`(('@{unit}' == 'rem' & @{passedRemx} == true) ? 1 : 0.1)`);
      @baseOutputx: unit((@x * @remBaseAdjx), rem);
    }
    .checkRemx();
  }


  .runChecksy() when not (isnumber(@y)) {
    @baseOutputy: @y;
  }
  .runChecksy() when (isnumber(@y)) {
    @tempbaseOutputy: (@y * unit(1, @unit));
    @passedRemy: isunit(@y, 'rem');
    .checkRemy() when not (isunit(@tempbaseOutputy, 'rem')) and not (@passedRemy) {
      @baseOutputy: (@y * unit(1, @unit));
    }
    .checkRemy() when (isunit(@tempbaseOutputy, 'rem')), (@passedRemy) {
      @remBaseAdjy: unit(`(('@{unit}' == 'rem' & @{passedRemy} == true) ? 1 : 0.1)`);
      @baseOutputy: unit((@y * @remBaseAdjy), rem);
    }
    .checkRemy();
  }


  .runChecksx();
  .runChecksy();


  .checkFallback() when (isunit(@baseOutputx,rem)) and (isunit(@baseOutputy,rem)) {
      background-position: @baseOutputx*10px @baseOutputy*10px;
  }
  .checkFallback() when (isunit(@baseOutputx,rem)) and not (isunit(@baseOutputy,rem)) {
      background-position: @baseOutputx*10px @baseOutputy;
  }
  .checkFallback() when not (isunit(@baseOutputx,rem)) and (isunit(@baseOutputy,rem)) {
      background-position: @baseOutputx @baseOutputy*10px;
  }
  .checkFallback() when not (isunit(@baseOutputx,rem)) and not (isunit(@baseOutputy,rem)) { }

  .checkFallback();

  background-position: @baseOutputx @baseOutputy;
}

4つの値を使用すると、これは非常に大きな関数になりますが、より良い方法はありますか?

4

1 に答える 1

5

更新：フォントサイジング

remこれにより、将来的にいくらか削減できる可能性がありますが、現在の (1.4.1) バージョンの LESS で解決する必要がある値に関しては間違いなくバグがあります。まだかなりの量のコードがありますが、すべてが最初の mixin 呼び出しに含まれたままです。

LESS (デフォルトのremセット単位のテスト ケース)

@defaultUnit: rem;

.setFontSize(@i) {
  .runChecks() when not (isnumber(@i)) {
    @baseOutput: @i;
  }
  .runChecks() when (isnumber(@i)) {
    @tempBaseOutput: (@i * unit(1, @defaultUnit));
    @passedRem: isunit(@i, 'rem'); //a bug with rem required this extra step
    .checkRem() when not (isunit(@tempBaseOutput, 'rem')) and not (@passedRem) {
      //keeps passed in non-rem unit or sets to default when non rem
      @baseOutput: (@i * unit(1, @defaultUnit));
    }
    .checkRem() when (isunit(@tempBaseOutput, 'rem')), (@passedRem) {
      //keeps passed in rem unit and value 
      //or sets to a default rem unit but uses passed value for px value 
      @remBaseAdj: unit(`(('@{defaultUnit}' == 'rem' & @{passedRem} == true) ? 1 : 0.1)`);
      @baseOutput: unit((@i * @remBaseAdj), rem);
      font-size: unit(@i, px) * (10 * @remBaseAdj); 
    }
    .checkRem();
  }

  .runChecks();
  font-size: @baseOutput;
}

.test1 {
  .setFontSize(5);
}
.test2 {
  .setFontSize(5rem);
}
.test3 {
  .setFontSize(5px);
}
.test4 {
  .setFontSize(5%);
}
.test5 {
  .setFontSize(5em);
}
.test6 {
  .setFontSize(inherit);
}

CSS出力

.test1 { /* i.e. unitless 5 with rem default unit */
  font-size: 5px;
  font-size: 0.5rem;
}
.test2 { /* i.e. passed in rem value */
  font-size: 50px;
  font-size: 5rem;
}
.test3 {
  font-size: 5px;
}
.test4 {
  font-size: 5%;
}
.test5 {
  font-size: 5em;
}
.test6 { /* any string */
  font-size: inherit;
}
于 2013-07-22T10:59:29.903 に答える