Как остановить Sass, добавляя пробелы перед единицами измерения?

Я пытаюсь выполнить этот учебник по гибкому дизайну макета, но используя 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;, которая является той же проблемой, которую я пытаюсь исправить

Ответы

Ответ 1

Вы можете нажать em в определение $h1_size, которое позволит вам просто разделить на 16 и получить результат в ems.

Если обе стороны деления находятся в em, ваш результат будет невозможен. Вы можете легко умножить на 1em, чтобы вернуть свое устройство, если это необходимо.

h1 {
  $h1_size: 24em;
  font-size: ($h1_size / 16);
  line-height:(28em / $h1_size);
  margin-top: (24em / $h1_size * 1em);
}

Умножение на 1em также может сделать что-то ближе к вашей исходной работе. Обычно вы можете хранить вещи без единиц, а затем только умножать на 1em, когда вы хотите, чтобы устройство отображалось. Это позволяет избежать некоторой бессмысленной пролиферации em в моем первом примере:

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16 * 1em);
  line-height:(28 / $h1_size);
  margin-top: (24 / $h1_size * 1em);
}

В каком смысле смысл в основном зависит только от того, будет ли ваш вывод в основном состоять из одной единицы или всех разных (в том числе нет).

Ответ 2

Вы можете удалить пространство с помощью <+ p > 

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16)+em;
  line-height:(28 / $h1_size)+em;
  margin-top: (24 / $h1_size)+em;
}

Выйдет.

h1 {
  font-size: 1.5em;
  line-height: 1.16667em;
  margin-top: 1em; }

Ответ 4

Поместите em в переменную, поэтому $h1_size: 24em;