code前端网Sass 颜色函数方法
我们将Sass中的颜色函数分为三个部分：设置颜色函数，获取颜色函数和操作颜色函数：
Sass设置颜色函数
| 函数 | 描述 |
|---|---|
| rgb(red,green,blue) | 使用红-绿-蓝（RGB）模型设置颜色。 RGB颜色值指定为：rgb（红色，绿色，蓝色）。 每个参数定义该颜色的强度，可以是0到255之间的整数，或百分比值（从0％到100％）。Example:rgb(0,0,255); //呈现为蓝色，因为蓝色参数设置为最高值（255），其他参数设置为0。 |
| rgba(red,green,blue,alpha) | 使用Red-Green-Blue-Alpha（RGBA）模型设置颜色。 RGBA颜色值是RGB颜色值的扩展，带有alpha通道 – 指定颜色的不透明度。 alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。Example:rgba（0,0,255,0.3）; //呈现为具有不透明度的蓝色 |
| hsl(hue,saturation,lightness) | 使用Hue-Saturation-Lightness（HSL）模型设置颜色-并表示颜色的圆柱坐标表示。色调是色轮上的度数（从0到360）-0或360是红色，120是绿色，240是蓝色。 饱和度是一个百分比值; 0％表示灰色阴影，100％表示全彩色。 亮度也是一个百分比; 0％为黑色，100％为白色。Example:hsl(120,100%,50%); // green |
| hsla(hue,saturation,lightness,alpha) | 使用Hue-Saturation-Lightness-Alpha（HSLA）模型设置颜色。 HSLA颜色值是HSL颜色值的扩展，带有alpha通道 – 指定颜色的不透明度。 alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。Example:hsl(120,100%,50%,0.3); // green with opacity |
| grayscale(color) | 设置颜色是颜色的补色。Example:complement(#7fffd4);Result: #ff7faa |
| invert(color,weight) | 设置颜色为颜色的反色或负色。 weight参数是可选的，必须是0％到100％之间的数字。 默认值为100％。Example:invert(white);Result: black |
Sass获取颜色函数
| 函数 | 描述 |
|---|---|
| red(color) | 将颜色的红色值作为0到255之间的数字返回。Example:red(#7fffd4);Result: 127 |
| green(color) | 将颜色的绿色值作为0到255之间的数字返回。Example:green(#7fffd4);Result: 255 |
| blue(color) | 将颜色的蓝色值作为0到255之间的数字返回。Example:blue(#7fffd4);Result: 212 |
| hue(color) | 返回颜色的色调，作为0deg和255deg之间的数字。Example:hue(#7fffd4);Result: 160deg |
| saturation(color) | 将颜色的HSL饱和度返回为0％和100％之间的数字。Example:saturation(#7fffd4);Result: 100% |
| lightness(color) | 将颜色的HSL亮度返回为0％到100％之间的数字。Example:lightness(#7fffd4);Result: 74.9% |
| alpha(color) | 返回颜色的alpha通道，作为0到1之间的数字。Example:alpha(#7fffd4);Result: 1 |
| opacity(color) | 返回颜色的alpha通道，作为0到1之间的数字。Example:opacity(rgba(127, 255, 212, 0.5);Result: 0.5 |
Sass操纵颜色函数
| 函数 | 描述 |
|---|---|
| mix(color1,color2,weight) | 创建color1和color2混合的颜色。 重量参数必须介于0％和100％之间。 较大的重量意味着应该使用更多的color1。 较小的重量意味着应该使用更多的颜色2。 默认值为50％。 |
| adjust-hue(color,degrees) | 调整颜色的色调，度数从-360deg到360deg。Example:adjust-hue(#7fffd4,80deg);Result: #8080ff |
| adjust-color(color,red,green,blue,hue,saturation,lightness,alpha) | 按指定的数量调整一个或多个参数。 此函数将指定的量添加到现有颜色值或从现有颜色值中减去指定的量。 |
| change-color(color,red,green,blue,hue,saturation,lightness,alpha) | 将颜色的一个或多个参数设置为新值。Example:change-color(#7fffd4,red: 255);Result: #ffffd4 |
| scale-color(color,red,green,blue,saturation,lightness,alpha) | 缩放一个或多个颜色参数。 |
| rgba(color,alpha) | 使用给定的Alpha通道创建新的颜色。Example:rgba(#7fffd4,30%);Result: rgba(127,255,212,0.3) |
| lighten(color,amount) | 创建浅色，颜色在0％到100％之间。 amount参数将HSL亮度增加该百分比。 |
| darken(color,amount) | 创建颜色较深的颜色，颜色在0％和100％之间。 amount参数将HSL亮度降低该百分比。 |
| saturate(color,amount) | 创建更饱和的颜色，颜色在0％到100％之间。 amount参数将HSL饱和度增加该百分比。 |
| desaturate(color,amount) | 创建颜色较少的饱和度，颜色在0％和100％之间。 amount参数将HSL饱和度降低该百分比。 |
| opacify(color,amount) | 使用介于0和1之间的量创建更不透明的颜色。量参数将Alpha通道增加该量。 |
| fade-in(color,amount) | 使用介于0和1之间的量创建更不透明的颜色。量参数将Alpha通道增加该量。 |
| transparentize(color,amount) | 使用介于0和1之间的数量创建更透明的颜色。量参数会将Alpha通道减少该数量。 |
| fade-out(color,amount) | 使用介于0和1之间的数量创建更透明的颜色。量参数会将Alpha通道减少该数量。 |
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
上一篇：什么是运营商！！在 JavaScript 中？ 下一篇：Sass 内省函数方法
相关文章
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。