CSS использует символ / как способ обособления численных данных наряду с пробелами и запятыми, а не для деления чисел. Поскольку SassScript является расширением синтаксиса CSS свойств, он должен поддерживать это, в то же время позволяя применять / для деления чисел друг на друга. Это означает, что по-умолчанию, если два числа, разделены символом / в SassScript, то они вместе с разделетилем окажутся в результирующем CSS.

Тем не менее, существует три ситуации, в которых символ / будет интерпретироваться именно как деление. Они охватывают подавляющее большинство случаев, когда подразумевается именно деление:

  • Если значение или любая его часть, хранится в переменной или возвращается функцией
  • Если значения заключены в круглые скобки
  • Если значение используется как часть другого арифметического выражения

Например:

p {
  font: 10px/8px;             // Явный CSS, деление отсутствует
  $width: 1000px;
  width: $width/2;            // Используется переменная, операция деления
  width: round(1.5)/2;        // Используется функция, операция деления
  height: (500px/2);          // Обособление скобками, операция деления
  margin-left: 5px + 8px/2px; // Используется +, операция деления
}

компилируется в

p {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px; }

Если вы хотите использовать символ / в переменной, в значении обычного CSS /, вы можете заключить переменную в #{}, Например:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

компилируется в

p {
  font: 12px/30px; }


На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.