Sass 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

除法运算和

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; }