Деление и знак /

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

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

  • Если значение или любая его часть, хранится в переменной или возвращается функцией
  • Если значения заключены в круглые скобки
  • Если значение используется как часть другого арифметического выражения
scss
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             // Явный CSS, деление отсутствует
  $width: 1000px
  width: $width/2            // Используется переменная, операция деления
  width: round(1.5)/2        // Используется функция, операция деления
  height: (500px/2)          // Обособление скобками, операция деления
  margin-left: 5px + 8px/2px // Используется +, операция деления
css
p {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px; 
}

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

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

Ваша 
Поддержка