Sass基本特性——运算

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

加法

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

编译出来的CSS:

.box {
  width: 788px;
}

1in = 96px;

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

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

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

.box{
    width: 20px + 8;
}

.box2{
    width: 20em + 8;
}

编译出来的CSS为:

.box {
  width: 28px;
}

.box2 {
  width: 28em;
}

减法

$container: 960px;
$sidebar-width: 220px;
$gap-width: 20px;

.content{
    width: $container - $sidebar-width - $gap-width;
    float: left;
}

编译出来的CSS：

.content {

  width: 720px;

  float: left;
}

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

乘法

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

如:

.box{
    width: 20px * 20px
}

编译时会报错。

而:

.box{
    width: 20px * 20;
}

编译出来的CSS：

.box{
    width: 400px;
}

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

除法

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

如:

.box{
    width: 100px / 2;
}

编译出来的CSS:

.box {
  width: 100px / 2;
}

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

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

编译出来的CSS为:

.box {
  width: 50px;
}

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

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

编译出来的CSS为：

.box {
    width: 70px;
}

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

如:

$width: 960px;

.col {
   width: $width / 10;
}

编译出来的CSS为:

.col {

  width: 96px;
}

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

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。

在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。

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

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

颜色运算

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

如:

p {
  color: #010203 + #040506;
}

编译出的CSS为:

p {
  color: #050709;
}

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

p {
  color: #010203 * 2;
}

编译出来的CSS:

p {
  color: #020406;
}

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

字符运算

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

$content: "Hello" + "" + "Sass!";
.box{
    &:after{
        content: $content;
    }
    &:before{
        content: " #{$content} ";
    }
}

编译出来的CSS为:

.box:after {
  content: "HelloSass!";
}
.box:before {
  content: " HelloSass! ";
}

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

div{
    cursor: e + -resize;
}

span{
    cursor: "e" + "-resize";
}

编译出来的CSS为:

div {
  cursor: e-resize;
}

span {
  cursor: "e-resize";
}

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

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

编译出来的CSS为:

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}