除法运算和
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;
height: 250px;
margin-left: 9px; }
如果你希望在纯 CSS 中使用变量和 /, 你可以用 #{} 包住变量。 例如:
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
被编译为:
p {
font: 12px/30px; }