乐趣区

关于css:Sass的运算

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

退出移动版