Sass基本运算介绍

在Sass中，共有3种运算情况：（1）数字运算；（2）字符运算；（3）颜色运算。

一、数字运算

在Sass中，共有4种数字运算方式：加、减、乘、除。对于这4种运算方式，我们需要注意以下几点：

• （1）在Sass加法中，数值可以带单位，但是需要运算单位相同，如果不相同则编译不通过；
• （2）在Sass减法中，数值可以带单位，但是需要运算单位相同，如果不相同则编译不通过；
• （3）在Sass乘法中，只能有一个数值带单位，另外一个数值只能是不带单位的数字。如果两个都是带单位的数字，则Sass会报错而编译不通过；
• （4）在Sass除法中，由于“/”在CSS中已经作为一种符号来使用了，所以我们需要在外面添加一个“小括号()”；

在实际开发中，不管是加法、减法，还是乘法、除法运算，我们都建议在外面加上小括号。这种书写方式，能够使得代码一目了然，也方便维护。希望小伙伴们也规范一下自己的书写方式。

二、字符运算

在Sass中，我们可以使用“+”（加号）来实现字符串的拼接。其中，结果字符串是否有引号，取决于左边字符串是否有引号。

举例：

div::before
{
    content: "Welcome to " + lvyestudy;
    font:sans- + "serif";
}

编译出来的CSS代码如下：

div::before 
{
    content: "Welcome to lvyestudy";
    font: sans-serif;
}

三、颜色运算

在Sass中，我们也是可以对颜色值进行运算的。颜色运算支持加、减、乘、除，并且是分段进行计算的。也就是说，红、绿、蓝这3个部分的颜色是单独进行计算的。

此外，如果颜色值不是十六进制颜色值（如#010203），而是RGB或者HSL的话，我们都是将RGB或HSL先转换为十六进制颜色值，然后再进行加、减、乘、除运算的。

举例：

div
{
    color: (#010203 + #040506);
}

编译出来的CSS代码如下：

div
{
    color: #050709;
}