• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

4.4 颜色运算

颜色值是Sass中的一种特殊的数据类型,我们在之前“Sass数据类型”这一节已经详细介绍过了。

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

举例1:

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

编译出来的CSS代码如下:

 
div
{
    color: #050709;
}

分析:

由于颜色运算是分段的,其中红、绿、蓝3个部分单独进行计算,所以这个例子的计算方式为:

 
01 + 04=05,
02 + 05=07,
03 + 06=09

最后,将这3段计算后的结果合并得到最终颜色值:#050709。

举例2:

 
div
{
    color: (#010203 * 2);
}

编译出来的CSS代码如下:

 
div
{
    color: #020406;
}

分析:

由于颜色运算是分段的,其中红、绿、蓝3个部分单独进行计算,所以这个例子的计算方式为:

 
01 * 2=02,
02 * 2=04,
03 * 2=06

最后,将这3段计算后的结果合并得到最终颜色值:#020406。

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

 
div
{
    color:(rgb(17,34,51) *2);
}

编译出来的CSS代码如下:

 
div 
{
    color: #224466;
}

分析:

rgb(17,34,51转化为十六进制颜色值为“#112233”,然后进行乘法运算,最后得到最终颜色值:#224466。

疑问

1、颜色运算到底有什么用?怎么我感觉是鸡肋呢?

颜色处理是非常好用的,这个我们在后面“Sass颜色函数”这一章会详细介绍。此外,这一节是后面的基础,而且也很简单,还是认真看一下。学到后面小伙伴们就知道颜色运算的真正用途了,暂时不需要纠结哈。

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

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

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

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

回到顶部