Я пытаюсь выполнить этот учебник по гибкому дизайну макета, но используя SASS/SCSS в качестве базового языка спецификации.
С этой целью я определил следующий SCSS:
body {
font: 100%/1.5;
}
h1 {
$h1_size: 24;
font-size: ($h1_size / 16)em;
line-height:(28 / $h1_size)em;
margin-top: (24 / $h1_size)em;
}
К сожалению, вывод из sass
в формат CSS выглядит следующим образом:
h1 {
font-size: 1.5 em;
line-height: 1.167 em;
margin-top: 1 em;
}
- с единицей, отделенной от значения пробелом. Chrome отклоняет эти значения как недопустимые и использует их только в том случае, если я вручную перейду и удалю пробелы.
Есть ли способ исправить эту проблему, настроив мой SCSS или передав опцию sass
?
До сих пор я пробовал:
- размещение блока внутри расчета:
- (
font-size: ($h1_size / 16em)
) = > Синтаксическая ошибка - (
font-size: (($h1_size)em / 16)
= >font-size: 24 em/16;
, которая является той же проблемой, которую я пытаюсь исправить
- (