Как преобразовать числовое значение в процент (или) добавить символ процента к числу?

Я пытаюсь использовать LESS css, чтобы сделать следующее:

width: ((480/1366)*100)+'%';

Проблема, однако, в том, что вывод становится:

width: 35.13909224011713 '%';

Как мне сделать его работоспособным? т.е.:

width: 35.13909224011713%;

css less
person Joel    schedule 08.08.2011    source источник

Ответы (3)


arrow_upward
13
arrow_downward

Можно использовать интерполяцию строк:

@myvar: ((480/1366)*100);
width: ~"@{myvar}%";

Это выведет

width: 35.13909224011713%;

Кроме того, если вы хотите, чтобы оно было округлено, вы можете использовать round().

person ldiqual    schedule 08.08.2011
comment
Во всяком случае, я могу сделать это без вар? Я пробовал ширину: @{(237/768)*100}%; Но, похоже, это не работает... - person Joel; 08.08.2011
comment
Эй, это снова я! Оказывается, это становится строкой, когда вы делаете это так. Мне нужно число... т.е. конечным результатом является ширина: 35,13909224011713%; Так что, боюсь, это не сработает. - person Joel; 08.08.2011
comment
Оказывается, вам также нужно экранировать строку! Итак, вот правильное решение со знаком ~: @myvar: ((480/1366)*100); ширина: ~@{myvar}%; - person Joel; 08.08.2011
comment
Оказывается, вам также нужно экранировать строку! Итак, вот правильное решение со знаком ~: @myvar: ((480/1366)*100); ширина: ~@{myvar}%; - person Joel; 08.08.2011
comment
Ну, это работало без ~, используя меньше 1.1.3, но я все равно отредактировал свой ответ с ним. - person ldiqual; 08.08.2011
comment
Код ~@{myvar}% выглядит совершенно запутанным для такой простой вещи. Я думаю, что это может быть более легко читаемым: ширина: процент ((480 / 1366)); - person Luke; 20.04.2013

arrow_upward
8
arrow_downward

Несмотря на то, что этот вопрос довольно старый, я хочу добавить еще несколько примеров о добавлении. Меньше настроит ваши устройства на то, над чем они работают.

10px + 20px

будет выводить 30px

(20/200) * 100%

выведет 10%

Таким образом, с единицами измерения вам не нужно объединять единицу измерения.

Я обнаружил, что добавление 0 помогает, когда вы не знаете, какой может быть стоимость единицы.

.mixin(@x, @y){
    @result: (@x / @y) * 100;
}

.my_class {
    .mixin(20, 100);
    width: @result + 0%; // you can use any unit here
}

Приведенный выше класс будет иметь ширину 20%. Если бы мы добавили px, это было бы 20px.

person Richard Testani    schedule 12.09.2012

arrow_upward
1
arrow_downward

По какой-то причине наименее подробный и наиболее очевидный метод здесь отсутствует (на самом деле он есть в ответе Ричарда Тестани, но там ему мешает дополнительный код, ведущий в неправильном направлении). Итак... Ответ оригиналу:

width: ((480/1366)*100)+'%';

так же просто, как:

width: (480/1366*100%);

Кстати о percentage:

это тоже помогает, но лично я бы никогда не использовал его из-за его многословия и нечитаемости. При быстром сканировании percentage(480/1366) читается точно так же, как peekabooze(480/1366), так что вам придется остановиться и посмотреть на него, чтобы получить подсказку. В отличие от явного появления % в 480/1366*100% (или 480 / 1366 * 100%), это делает его более заметным.

person seven-phases-max    schedule 21.01.2015
comment
Немного не по теме, но есть ли план выставить значение точности в качестве параметра компилятора? - person Harry; 05.07.2015
comment
@ Гарри, нет (без вариантов использования, см. #1909). - person seven-phases-max; 05.07.2015