Условные правила CSS с меньшим значением, основанным на переменной

Переменная может принимать значения в процентах или px, например:

@some-var: 50px; или @some-var: 46%;

Как я могу определить определенный набор правил CSS, если значение находится в пикселях, и другой набор правил, если значения находятся в процентах?

Есть ли что-то вроде

if(isValueInPixels(@some-var)){

  // css rules here


}else{

  // other rules here
}

Ответ 1

Я думаю, вы можете использовать что-то, что они называют Protected 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/

Ответ 2

Как заметил Адам Спикер, Защищенные 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%);
}