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

Question

Я пытаюсь использовать LESS css для выполнения следующих действий:

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

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

width: 35.13909224011713 '%';

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

width: 35.13909224011713%;

Answer 1

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

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

Это выдаст

width: 35.13909224011713%;

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

Answer 2

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

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.

Answer 3

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

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

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

width: (480/1366*100%);

---

Говоря о percentage: