乐趣区

关于css:Sass的运算

jiezi

本节咱们学习 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 代码中能够看出，当一个表达式中有多种运算符时，和数学中一样，先算乘除再算加减，有括号则先算括号里的。

退出移动版