Недавно я перешел на LessCSS и столкнулся с тем, что считаю серьезным ограничением, и мне было интересно, есть ли способ сделать это?? Я хочу сказать, что где-то читал, что Sass допускает пользовательские функции, но сделает ли LessCSS то же самое?
Что я хочу сделать:
@fs: 16;
// either return the value
.s(@t,@s,@u) {
// return @t/@s*@u;
}
#elem {
margin-top: .s(30,@fs,1em);
width: .s(900,@fs,1em);
.child {
width: .s(100,900,100%);
}
}
// or have a property argument
.s(@t,@s,@u,@p) {
@{p}: @t/@s*@u;
}
#elem {
.s(30,@fs,1em,margin-top);
.s(900,@fs,1em,width);
.child {
.s(100,900,100%,width);
}
}
Единственный способ понять это, но он очень ограничен, потому что мне нужно иметь несколько примесей:
.s(@t,@s,@u,@p) when (@p = margin-top) { margin-top: @t/@s*@u; }
// margin[-top|-right|-bottom|-left]
// padding[-top|-right|-bottom|-left]
.s(@t,@s,@u,@p) when (@p = width) { width: @t/@s*@u; }
.s(@t,@s,@u,@p) when (@p = height) { height: @t/@s*@u; }
Я знаю, что всегда могу изменить файл less.js чтобы добавить функцию интервала, такую как встроенная функция round()
или ceil()
. Но это убивает возможность компилировать файлы .less для производства с использованием LessPHP, Crunch, SimpLess.