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

121

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

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

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

$my_width: (4/12)%;

div{
width: $my_width;
}

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

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

css sass

— Ник Гинанто
источник

Нечего возиться. Я просто хочу добавить к вычислению единицу числа. То же, что (400/20) пикселей. Как мне указать число и px / em /% в scss? Таким образом, у меня были бы «глобальные переменные», которые я мог бы изменить один раз,

— Ник Гинанто

Попробуйте добавить скобку типа $ my_width: ((4/12)%);

— Шри

Упс .. Извините, у меня не было возможности проверить это и сделать еще одну попытку .. {$ my_width: (4/12)%;}

— Шри

Ответы:

211

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

$my_width: percentage(4/12);
div{
width: $my_width;
}

— Tomas
источник

есть ли аналогичная функция для px и em?

— Ник Гинанто

Не уверен, но в исходном разделе документации вы можете увидеть базовую логику: Sass :: Script :: Number.new (value.value * 100, ['%']), поэтому я бы подумал, что если они не существуют, вы можете сделать это напрямую или сами создать некоторые функции-оболочки.

— Tomas

@NickGinanto для px, вы можете просто добавить +pxв конец строки, напримерwidth: ($foo + $bar) +px

— DisgruntledGoat 06

@DisgruntledGoat Нет, никогда не делайте этого ни при каких обстоятельствах. Добавление единиц должно производиться с помощью умножения (например $foo + $bar * 1px), объединение единиц таким образом дает только строку.

— cimmanon

@cimmanon это недавно изменилось? Я уверен, что это не тот случай, когда я разместил свой комментарий.

— DisgruntledGoat

По-другому:

$my_width: 4/12*100%;

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

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

— rlejnieks
источник

Обратите внимание, что мне пришлось использовать 100/6 * 1%, чтобы сделать эту работу для меня, иначе я получил бы 1666,67%.

— sp00n

где я могу найти документацию, что на самом деле делает * 100%?

— Ini

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

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

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

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