Scss运算符

6. 圆括号

圆括号()可以用来影响运算的顺序，和数学中的效果是一致的。

7. 关系运算符

1. 相等运算==和不相等运算!=。
   1. 所有数据类型均支持 == 和!=
2. < > >= <=

布尔运行符

三个布尔运算符and or not

数字操作符

+ - * / %

1. %为求余
2. 纯数字与百分号或单位运算时会自动转化成相应的百分比与单位值
3. /在css中有分隔数字的用途，在scss中，以下三种情况会进行除法运算：
   1. 如果值或值的一部分，是变量或者函数的返回值；
   2. 如果值被圆括号包裹；
   3. 如果值是算数表达式的一部分。
4. 如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 css文件中，只需要用 #{} 插值语句将变量包裹。

$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; // 不运算
    width: ($width/2); // 使用变量与括号
    width: (#{$width}/2); // 使用 #{} 插值语句将变量包裹，避免运算。
    z-index: round(10)/2; // 使用了函数
    height: (500px/2); // 使用了括号
    margin-left: 5px + 8px/2px; // 使用了+表达式
}

字符串运算

1. +可用于连接字符串；
2. 如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；
3. 无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

.container {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
}

编译为css

.container {
    content: "Foo Bar";
    font-family: sans-serif;
}