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现在提供了一种组合多个防护的解决方案，这将允许通过单个混合来完成。 http://lesscss.org/features/#css-guards-feature

例如：

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

用法：

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

基于变量的条件CSS规则少

2 个答案: