Как задать переменные в SCSS/SASS?

Question

[Егор Кондратьев]

В SCSS/SASS есть возможность считать значения в процентах.
Например:
font-size: 16px - базовый размер шрифта для body.
font-size: 60/16*100%; - шрифт заголовка в процентах (375%)
Чтобы не писать каждый раз ( /16*100% ) хочу задать переменную.
$a: /16*100% - сразу ругается на слеш, убираю...
$a: 16*100%;
Дальше хочу подставить:
font-size: 60/$a: 16*100%;
Но получаю:
Error: 0.0375/% isn't a valid CSS value.
Это значит: порядок умножения нарушается?, сначала считается переменная отдельно, а потом уже ее значение ( 1600 ) подставляется, как мне это пофиксить.
P.s. первый день играю с SCSS/SASS.

Answer 1

[Максим Морев]

Ну нельзя число на проценты поделить.

Сделайте так:
$a: 60 / 16 * 100 + '%';

А лучше оформите отдельную функцию вроде:

@function percent-font-size($base) {
  @return $base / 16 * 100 + '%';
}

font-size: percent-font-size(16);

Ну и я не поднимаю вопрос, зачем оно вам надо - мало ли.

Comments

[Егор Кондратьев]

Первый вариант должен был выглядеть как:
$a: 16*100 + '%'; (ваш вариант) или $a: 16*100%; (изначальный вариант)
body { font-size: 16px; }
.block__title {
font-size: 60 /$a; -где '60' -произвольный размер шрифта (например заголовка)
}

Проблема в том, что переменная сразу пересчитывается в 1600, и получается ( 60 / 1600), то есть как я понял, нарушается порядок умножения.

P.s. с @function еще не ознакомился - как работает пока не знаю, может это и верное решения, но проверить я не могу :(.
P.s.s. За попытку благодарю.

[Максим Морев]

Lineez, никакой порядок здесь не нарушается - вы ваше $a посчитали изначально, далее вы используете вычисленное значение.
Вам для решения задачи просто нужно избавиться от навязчивого желания число поделить на проценты.
Используйте функцию, которую я написал, и будет вам счастье. Это нетрудно. :)

[Егор Кондратьев]

Максим Морев,
@function percent-font-size($base) {
return $base / 16 * 100 + '%';
}

Возможно уже глупость, но разве не так должно быть?

Ответ получаю в виде "375%" - то есть как строку.
P.s. двумя руками душит...

[Егор Кондратьев]

Lineez, убрал '' у процента, все работает

[Максим Морев]

Lineez, да, у вас всё верно, у себя поправил - заплутал в вашей задаче. Здорово, что всё получилось :)

[Егор Кондратьев]

Максим Морев, Еще раз благодарю.