LESS. Возможно ли пересчитывать px в rem без миксинов?

Question

[BigKompot]

Здравствуйте.

Интересует возможность автоматического пересчета в другие единицы измерения с помощью параметризированных переменных.
Например, создаётся переменная типа @value(), и когда в круглые скобки прописываешь значение в px, она отдаёт результат в rem в свойство, в котором указана.
Что-то типа:

.block {
  width: @value(100);
}

После компиляции:

.block {
  width: 6.25rem;
}

Использование миксинов позволяет определять только конкретные свойства, меня же интересует именно возможность универсального применения

Answer 1

[Евгений]

Стандартными средствами никак, в less вроде как нету пользовательских функций, но можно дописать расширение на JS, на stackoverflow где-то был подобный вопрос и такой ответ:

em: function(less, fontsize, basefontsize){
    if (less.functions.functionRegistry.get('ispixel')){
        basefontsize = (basefontsize) ? basefontsize.value : 16
        return fontsize.value/basefontsize+'em';
    }
}

.block {
    font-size: em(16px);
}

Comments

[BigKompot]

Ok, спасибо.
А куда вставлять эту конструкцию?

[Евгений]

BigKompot: Честно сам не делал и с less особо не работал, вот на SO опять же были подобные вопросы: stackoverflow.com/questions/9958682/user-defined-f...

Answer 2

[Ivan Bogachev]

Пользовательских функций действительно нет, но, как вариант, можно взять такую штуку:
@rem: 1rem / 16px;

И умножать на нее в тех местах, где нужно перевести px в rem:

p {
    font-size: @rem * 50;
    border: @rem * 5 solid #000;
    padding: @rem * 10;

    /* В CSS получится
        font-size: 3.125rem;
        border: 0.3125rem solid #000;
        padding: 0.625rem;
    */
}

Ссылка на codepen

Comments

[BigKompot]

Спасибо за отклик.
Как вариант, но по удобству всё равно на уровне использования миксина.

Answer 3

[zooks]

Вот мой миксин на Sass.

$browser-context: 16

@function rem($pixels, $context: $browser-context)
  @return #{$pixels / $context}rem

Вызов:
font-size: rem(14)

В общем, рекомендую переходить на Sass. После LESS удобнее будет синтаксис Scss.

Comments

[BigKompot]

Решение изящное, но интересует как это реализовать именно в LESS