Условные правила 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%);
}