Рассчитать только значение менее

Question

В менее я могу создать функцию, которая преобразует точки в эм и возвращать только значение

@em($target, $context: 16px) { 
    @return ($target/$context) * 1rem; 
} 

Таким образом, я могу использовать функцию как

.body { 
    font-size: em(22px); 
    padding: 0 em(10px); 
} 

который будет выводить

.body { 
    font-size: 1.375em; 
    padding: 0 0.625em; 
} 

Однако менее, единственный способ, которым я могу видеть, чтобы сделать ту же самую функцию, чтобы передать селектор в функция тоже

.em(@selector, @target, @context: 16px) { 
    @{selector}: unit((@target/@context), em); 
} 

И это нужно использовать следующим образом

.body { 
    .em(font-size: 22px); 
} 

, которые будут выводить

.body { 
    font-size: 1.375em; 
} 

Таким образом, это хорошо, если у меня есть один селектор и одно значение, но как в примере Sass выше, если мне нужно заполнить с помощью 0 и 0.675em, то я не могу использовать функцию Less для этого.

Есть ли способ вернуть только значение из функции в Менее, как это делает Сасс, поэтому мне не нужно передавать селектор в функцию?

Answer 1

Короче говоря, нет, вы не можете определить «истинные» функции в Меньше. Таким образом, для конкретного потребительной случае самый компактный подход что-то вроде этого:

@context: 16px; 
@u: 1em/@context; 

.body { 
    font-size: 22 * @u; 
    padding: 0 10 * @u; 
} 

Или это:

@context: 16px; 
@u: 1em/@context; 

.body { 
    font-size: @u * 22px; 
    padding: 0 @u * 10px; 
} 

зависимости от того, вы найдете более читаемым (обратите внимание, что арифметические выражения требуют скобки, если вы используете --strict-math=on вариант).

Answer 2

Что я сделал в своем собственном меньше файлов, создайте mixin для определенных свойств. Основная причина заключалась в том, чтобы включить быстрое исправление, если поддержка браузера необходимо расширить для браузеров, не поддерживающих резервное копирование, таких как IE8.

Я создал переменную @ base-font-size и установил 16 на мой нормализованный css.

.font-size(@pixels) { 
    @remValue: (@pixels/@base-font-size); 
    @pxValue: (@pixels * 1); 
    font-size: ~"@{pxValue}px"; 
    font-size: ~"@{remValue}rem"; 
} 

p { .font-size(20); } 

Answer 3

Что вы можете сделать, это определить переменную внутри mixin, а затем после выполнения mixin присвойте эту переменную все, что вам нужно, как описано here.

я сделал что-то подобное, чтобы получить значения бэр от рх:

.px2rem(@px-value) { 
    @px2rem-xs: unit((@px-value/@root-font-size-xs), rem); 
    @px2rem-sm: unit((@px-value/@root-font-size-sm), rem); 
    @px2rem-ms: unit((@px-value/@root-font-size-ms), rem); 
    @px2rem-md: unit((@px-value/@root-font-size-md), rem); 
    @px2rem-lg: unit((@px-value/@root-font-size-lg), rem); 
} 

Выполнением подмешать:

.px2rem(10px); 

Переменные устанавливаются и могут быть использованы в дальнейшем

.something{ 
    margin: @px2rem-xs; 
    @media screen and (min-width: @screen-md-min) { 
    margin: @px2rem-md; 
    } 
}