Обчисліть відсотки за допомогою SCSS / SASS

121

Я хочу встановити ширину у відсотках у scss за допомогою обчислення, але це дає мені помилки.

Недійсний CSS після "...- width: (4/12)%": очікуваний вираз (наприклад, 1px, жирний шрифт), був ";"

Я хочу зробити щось подібне

$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;
}

— Томаш
джерело

чи є подібна функція для px та em?

— Нік Джинанто

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

— Томаш

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

— DisgruntledGoat

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

— cimmanon

@cimmanon це змінило нещодавно? Я впевнений, що це було не так, коли я розмістив свій коментар.

— НезадоволенняГота

Інший спосіб:

$my_width: 4/12*100%;

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

Sass виведе значення у%.

— rlejnieks
джерело

Зауважте, що мені довелося використати 100/6 * 1%, щоб зробити цю роботу для мене, інакше я склав 1666,67%.

— sp00n

де я можу знайти документацію, що насправді робить 100%?

— Іні

Мені вдалося зробити так:

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

Таким чином, вам не потрібно використовувати будь-яку спеціальну функцію.

— Енріке Кукетті
джерело