css - 変数に基づく、少ない条件付きCSSルール

Question

変数は、次のようにパーセンテージまたはピクセル値を取ることができます。

@some-var: 50px;また@some-var: 46%;

値がピクセル単位の場合は特定のCSSルールのセットを定義し、値がパーセンテージの場合は別のルールセットを定義するにはどうすればよいですか？

のようなものはありますか

if(isValueInPixels(@some-var)){

  // css rules here


}else{

  // other rules here
}

？

Answer 1

Guarded Mixinsと呼ばれるものを使用できると思います。

このようなものを試してみてください...

.mixin (@a) when (ispixel(@a)) {
 /* ... your pixel specific logic ... */
}
.mixin (@a) when (ispercentage(@a)) {
 /* ... your percentage specific logic ... */
}

.coolStuff {
 .mixin(50px);
 .mixin(50%);
}

http://lesscss.org/でGuarded Mixinsを参照してください。

Answer 2

Adam Spicer が指摘したように、Guarded Mixinsが最適なソリューションです。ただし、LESS は、複数のガードをグループ化するソリューションを提供するようになりました。これにより、1 つの mixin でこれを実現できます。 http://lesscss.org/features/#css-guards-feature

例えば：

.mixin(@a){
  & when (ispixel(@a)){
    //logic
  }
  & when (ispercentage(@a)){
    //logic
  }
}

使用法：

selector{
  .mixin(50px);
  .mixin(46%);
}