css - 条件 CSS 规则较少，基于变量

Question

该变量可以采用百分比或 px 值，例如：

@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 现在提供了一种将多个警卫分组的解决方案，这将允许使用单个 mixin 来完成。 http://lesscss.org/features/#css-guards-feature

例如：

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

用法：

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