Деление и знак /
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 // Явный 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-size: 12px
$line-height: 30px
font: #{$font-size}/#{$line-height}
p {
font: 12px/30px;
}
Поддержка