Sass的运算

Posted 书和咖啡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 代码中可以看出,当一个表达式中有多种运算符时,和数学中一样,先算乘除再算加减,有括号则先算括号里的。

以上是关于Sass的运算的主要内容,如果未能解决你的问题,请参考以下文章

scss Sass片段:响应视频

Sass的运算

Sass的运算

1-8 Sass的基本特性-运算

sass学习笔记:sass的运算

SASS 运算 (Operations)符的基本使用