Рассчитайте процент с помощью SCSS / SASS

121

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

Неверный CSS после "...- width: (4/12)%": ожидаемое выражение (например, 1 пиксель, жирный шрифт), было ";"

Я хочу сделать что-то вроде

$my_width: (4/12)%;

div{
width: $my_width;
}

как мне добавить туда знак%?

Тот же вопрос с px и em

css sass Ник Гинанто
источник
1
Нечего возиться. Я просто хочу добавить к вычислению единицу числа. То же, что (400/20) пикселей. Как мне указать число и px / em /% в scss? Таким образом, у меня были бы «глобальные переменные», которые я мог бы изменить один раз,
Ник Гинанто
Попробуйте добавить скобку типа $ my_width: ((4/12)%);
Шри
Упс .. Извините, у меня не было возможности проверить это и сделать еще одну попытку .. {$ my_width: (4/12)%;}
Шри

Ответы:

211

Вы пробовали процентную функцию?

$my_width: percentage(4/12);
div{
width: $my_width;
}
Tomas
источник
1
есть ли аналогичная функция для px и em?
Ник Гинанто
1
Не уверен, но в исходном разделе документации вы можете увидеть базовую логику: Sass :: Script :: Number.new (value.value * 100, ['%']), поэтому я бы подумал, что если они не существуют, вы можете сделать это напрямую или сами создать некоторые функции-оболочки.
Tomas
4
@NickGinanto для px, вы можете просто добавить +pxв конец строки, напримерwidth: ($foo + $bar) +px
DisgruntledGoat 06
2
@DisgruntledGoat Нет, никогда не делайте этого ни при каких обстоятельствах. Добавление единиц должно производиться с помощью умножения (например $foo + $bar * 1px), объединение единиц таким образом дает только строку.
cimmanon
@cimmanon это недавно изменилось? Я уверен, что это не тот случай, когда я разместил свой комментарий.
DisgruntledGoat
30

По-другому:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass выведет значение в%.

rlejnieks
источник
13
Обратите внимание, что мне пришлось использовать 100/6 * 1%, чтобы сделать эту работу для меня, иначе я получил бы 1666,67%.
sp00n
где я могу найти документацию, что на самом деле делает * 100%?
Ini
1

Мне удалось заставить его работать так:

div{
   width: (4/12)* 1%;
   }

Таким образом, вам не нужно использовать какие-либо специальные функции.

Энрике Кучетти
источник