CSS中目前只有calc()能做运算,但是在Sass中,可以做各种数学运算……

1、加法

1
2
3
.box{
width: 20px + 8in;
}

编译出来的CSS:

1
2
3
.box {
width: 788px;
}

1in = 96px;

当em,rem等相对当前字体,于px在一起不能运算,会报错,如:

1
2
3
.box{
width: 20px + 8em;
}

不过如果其中一个不同单位,那么会以另一个带单位的为准,如:

1
2
3
4
5
6
7
.box{
width: 20px + 8;
}
.box2{
width: 20em + 8;
}

编译出来的CSS为:

1
2
3
4
5
6
7
.box {
width: 28px;
}
.box2 {
width: 28em;
}

2、减法

1
2
3
4
5
6
7
8
$container: 960px;
$sidebar-width: 220px;
$gap-width: 20px;
.content{
width: $container - $sidebar-width - $gap-width;
float: left;
}

编译出来的CSS:

1
2
3
4
5
6
.content {
width: 720px;
float: left;
}

减法和加法一样,不支持em,rem等相对当前字体大小的单位与px进行计算。

3、乘法

乘法运算时,只需要其中一个带单位即可,如果都带有单位会报错,
如:

1
2
3
.box{
width: 20px * 20px
}

编译时会报错。

而:

1
2
3
.box{
width: 20px * 20;
}

编译出来的CSS:

1
2
3
.box{
width: 400px;
}

与加减法一样,不同类型的单位运算时会报错。

4、除法

Sass的乘法运算规则也适用于除法运算,不过除法运算有特殊之处,因为”/”符号在CSS中已经作为一种符号使用,因此在Sass中直接使用”/”作为处好时,将不会生效,编译时既不会报错,也不会得到我们想要的效果。

如:

1
2
3
.box{
width: 100px / 2;
}

编译出来的CSS:

1
2
3
.box {
width: 100px / 2;
}

要修正这个文字,只需要给运算的外面添加一对小括号即可。

1
2
3
.box{
width: (100px / 2);
}

编译出来的CSS为:

1
2
3
.box {
width: 50px;
}

除了小括号以外,如果除了 “/” 外,还有其它的运算符号,那么也会被当作除号看待。

1
2
3
.box {
width: 100px / 2 + 20px;
}

编译出来的CSS为:

1
2
3
.box {
width: 70px;
}

另外,如果是用变量进行除法运算,”/”也会自动被识别为除法。

如:

1
2
3
4
5
$width: 960px;
.col {
width: $width / 10;
}

编译出来的CSS为:

1
2
3
4
.col {
width: 96px;
}

综合上述,”/ ”符号被当作除法运算符时有以下几种情况:

如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
如果数值被圆括号包围。
如果数值是另一个数学表达式的一部分。
在除法运算时,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。

关于单位计算的问题,同物理倒是非常像。

如果不想记”/”的规则,那么在想作为除法使用是,加上一个括号即可。

5、颜色运算

所有的运算都支持颜色值。
如:

1
2
3
p {
color: #010203 + #040506;
}

编译出的CSS为:

1
2
3
p {
color: #050709;
}

同样颜色值也支持乘法运算:

1
2
3
p {
color: #010203 * 2;
}

编译出来的CSS:

1
2
3
p {
color: #020406;
}

运算规则和二进制乘法相同,依次与每一位相乘。个人觉得颜色值的运算意义不是很大。

6、字符运算

在Sass中可以用”+”号对字符串进行拼接,如:

1
2
3
4
5
6
7
8
9
$content: "Hello" + " " + "Sass!";
.box{
&:after{
content: $content;
}
&:before{
content: " #{$content} ";
}
}

编译出来的CSS为:

1
2
3
4
5
6
.box:after {
content: "Hello Sass!";
}
.box:before {
content: " Hello Sass! ";
}

除了在变量中做字符连接运算之外,还可以直接通过 +,把字符连接在一起:

1
2
3
4
5
6
7
div{
cursor: e + -resize;
}
span{
cursor: "e" + "-resize";
}

编译出来的CSS为:

1
2
3
4
5
6
7
div {
cursor: e-resize;
}
span {
cursor: "e-resize";
}

==注意==:如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 也就是说始终与加号左边的保持一致:

1
2
3
4
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}

编译出来的CSS为:

1
2
3
4
p:before {
content: "Foo Bar";
font-family: sans-serif;
}

根据慕课网sass入门篇整理

本文地址: https://lxchuan12.github.io/2016/08/29/20160829-Sass-basic-characteristics-of-computing/