Sass内置了很多函数,本文主要是对项目中用到的darken函数时想记录和扩展一下,对颜色函数darken()和lighten()进行记录。 darken($color, $amount) Sass文档中有相关的介绍,主要是用来将颜色加深。该darken()函数将亮度降低固定量,$amount是处于0%到100%之间的值,按照这个值减亮度。 darken 文档介绍相关 文档中介绍...
darken($color, $amount):将颜色变暗,$amount参数表示变暗的程度。 示例:darken(#3498db, 20%) saturate($color, $amount):增加颜色的饱和度,$amount参数表示增加的程度。 示例:saturate(#3498db, 20%) desaturate($color, $amount):减少颜色的饱和度,$amount参数表示减少的程度。 示例:desaturate(#3498db, ...
在最初使用Sass的时候,用的最多的颜色函数就是lighten($color, $amount)和darken($color, $amount),对于其他的函数,少之又少,真是弱爆了,有木有。 切图的时候,我的颜色全部是通过PS的吸管工具获取的,之后复制粘贴即可。如果我们熟悉了颜色标准,那以后我们对颜色的认知,我想不会再是通过吸管工具获取这种层面了...
其中我们最常用的有:lighten、darken、saturation、lightness、adjust-hue lighten($color,$amount):通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色; darken($color,$amount):通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色; invert($color):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。 saturat...
lighten和darken这两个内置函数经常被用到元素被hover/focus时,当我们hover,一个元素的时候。此时并不希望改变这个元素的色值,但是又想要用户感知到鼠标停留在这个元素上。此时这两个内置函数就发挥了他们的作用了。 代码语言:javascript 复制 @mixin button-type($background,$border,$color,$hover-background:lighten...
darken(color,amount)通过改变颜色的亮度值(0% - 100%),让颜色变暗,创建一个新的颜色。 saturate(color,amount)提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount) desaturate(color,amount)调低一个颜色的饱和度后产生一个新的色值。同样,饱和度的取值区间在 0% ~ 100%。等同于 adju...
lighten() 和 darken() 函数只是在原始颜色的基础上对亮度值进行运算操作,但是生成出来的新颜色在色相和饱和度会有略微的变化,比如上面的实例生成的新颜色与原始色在色相与饱和度值的对比: >> hue(#ad141e) 356.07843deg >> hue(#db1926) 355.97938deg ...
darken($color,$amount):通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色; invert($color):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。 saturate($color,$amount):通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色 desaturate($color,$amount):通过改变颜色的饱和度值,让颜色更少的饱...
61、darken(color, amount) 通过改变颜色的亮度值(0% - 100%),让颜色变暗,创建一个新的颜色。 62、saturate(color, amount) 提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount) 63、desaturate(color, amount) 调低一个颜色的饱和度后产生一个新的...
darken:颜色变暗,lighten( amount) 颜色变亮, $amount 取值在0% - 100%之间 String(字符串函数) quote:给内容加字符串,str-length:取长度 Math(数值函数处理数值计算) percentage()将无单元的数值转换为百分比, round()将数字四含五入为最接近的整数,min()和max()获取几个数字中的最小值或最大值,random(...