Sass 运算及插值语法

运算

在 css 属性的基础上，Sass 提供了一些名为 SassScript 的新功能。SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。

数据类型

• 数字。例如：1、2、13、10px。

• 字符串。包括有引号字符串与无引号字符串，例如："foo"、'bar'、baz。

• 颜色。例如：blue、#04a3f9、rgba(255,0,0,0.5)。

• 布尔型。例如：true、false。

• 空值。null。

• 数组（list）。用空格或逗号作分隔符，例如：1.5em 1em 0 2em、Helvetica, Arial, sans-serif。

• maps。相当于 JavaScript 的 object，例如：(key1: value1, key2: value2)。

数字运算

SassScript 支持数字的加减乘除、取整等运算（+、-、*、/、%），如果必要会在不同单位间转换值。

p {
  width: 1in + 8pt;
}

编译为：

p {
  width: 1.11111in;
}

字符串运算

+ 可用于连接字符串

圆括号

圆括号可以用来影响运算的顺序

常用内置函数

SassScript 定义了多种函数，有些甚至可以通过普通的 css 语句调用：

// scss
p {
  color: hsl(0, 100%, 50%);
}
​
// css
p {
  color: red;
}

Sass 函数允许使用关键词参数（keyword arguments），上面的例子也可以写成：

// scss
p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
​
// css
p {
  color: red;
}

虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺。另外，参数名被视为变量名，下划线、短横线可以互换使用。

插值语句

通过 #{} 插值语句可以在选择器或属性名中使用变量：

// scss
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
​
// css
p.foo {
  border-color: blue;
}

#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 css。