运算和插值语句

一运算

1.1数据类型

• 数字。例如：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)。

1.2数字运算

SassScript 支持数字的加减乘除、取整等运算（+、-、*、/、%）

以下三种情况 / 将被视为除法运算符号：

• 如果值或值的一部分，是变量或者函数的返回值；

• 如果值被圆括号包裹；

• 如果值是算数表达式的一部分。

1.3颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色、绿色、蓝色的值

1.4字符串运算 

+可用于连接字符串：

 

// scss
p {
  cursor: e + -resize;
}

// css
p {
  cursor: e-resize;
}

如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

// scss
p::before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

// css
p::before {
  content: "Foo Bar";
  font-family: sans-serif;
}

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

 二圆括号

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

三插值语句

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

 四定制按钮