Sass的运算

Posted 2021-05-29 书和咖啡

本节我们学习 Sass 中的运算，一般的编程语法中都支持使用运算，Sass 中同样可以做各种数学运算，包括最基本的加减乘除运算、变量运算、颜色运算、字符运算等。本节我们主要讲一下 Sass 中最基本的数学运算。

加法运算

加法运算 + 是 Sass 中基本运算之一，在变量或者属性中都可以做加法运算。

示例：

$num:14px;
.xkd{
    width:50px + 50px;
    font-size: $num + 4px;
}

编译成 CSS 代码：

.xkd {
  width: 100px;
  font-size: 18px;
}

在进行运算时，还要注意所带的单位，当单位不同时会导致报错，例如：

.xkd{
    font-size: 12px + 2em;
}

执行代码，报错信息如下所示：

Error: Incompatible units: 'em' and 'px'.
        on line 2 of style.scss
  Use --trace for backtrace.

减法运算

Sass 中的减法运算和加法运算使用起来很类似，当使用不同类型的单位时也会报错。

示例：

$width:100px;
.xkd{
    width: 500px - $width;
    height: 300 - $width;
}

编译成 CSS 代码：

.xkd {
  width: 400px;
  height: 200px;
}

乘法运算

Sass 中的乘法运算和加减法运算一样，不同单位的值进行计算会导致报错。但是它们之间还是有一些不同，当我们使用相同单位的值进行乘法运算时，会出现问题。

示例：

.xkd{
    width:100px * 2px;
}

执行的代码后报错信息如下所示：

Error: 200px*px isn't a valid CSS value.
        on line 2 of style.scss
  Use --trace for backtrace.

所以如果我们要进行乘法运算，两个值需要为其中一个指定单位即可：

.xkd{
    width:100px * 2;
}

编译成 CSS 代码：

.xkd {
  width: 200px;
}

除法运算

Sass 中的除法运算也和乘法运算差不多，不过除法运算还有一个不一样的地方。在 CSS 中 / 符号已经作为一种符号使用，所以当我们在做除法运算时，如果直接使用 / 符号，编译后还是会原样输出，这样并不是我们想要的效果。

示例：

.xkd{
    width:100px / 2;
}

编译成 CSS 代码：

.xkd {
  width: 100px / 2;
}

可以看到编译后的 CSS 代码中， / 符号并没有进行计算。所以如果我们想要进行除法运算，要怎么办呢？

其实很简单，只需要将运算表达式使用一对小括号 () 括起来即可，例如：

.xkd{
    width:(100px / 2);
}

编译成 CSS 代码：

.xkd {
  width: 50px;
}

除此之外，当我们在一个已经存在运算符的表达式中使用 / 符号时，不用小括号括起来，也能进行除法运算。

示例：

.xkd{
    width:100px + 300px / 2;
}

编译成 CSS 代码：

.xkd {
  width: 250px;
}

从编译后的 CSS 代码中可以看出，当一个表达式中有多种运算符时，和数学中一样，先算乘除再算加减，有括号则先算括号里的。