• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

4.5 本章总结

在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;
}
:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部