Sass 颜色函数



  • 定义和使用

    我们将 Sass 中的颜色函数分为三个部分:设置颜色函数、获取颜色函数和操作颜色函数。
  • Sass 设置颜色函数

    函数 描述 & 示例
    rgb(red,green,blue)
    使用红-绿-蓝(RGB)模型设置颜色。RGB颜色值指定为:RGB(红色、绿色、蓝色)。每个参数都定义了该颜色的强度,可以是0到255之间的整数,也可以是百分比(从0%到100%)。
    示例
    rgb(0, 0, 255); //呈现为蓝色,因为蓝色参数设置为其最大值(255),而其他参数设置为0
    rgb(red,green,blue,alpha)
    使用红-绿-蓝-阿尔法(RGBA)模型设置颜色。RGBA颜色值是RGB颜色值的扩展,具有alpha通道-该通道指定颜色的不透明度。alpha参数是介于0.0(完全透明)和1.0(完全不透明)之间的数字。
    示例
    rgba(0, 0, 255, 0.3); //用不透明度渲染为蓝色
    hsl(hue,saturation,lightness)
    使用色调饱和度亮度(HSL)模型设置颜色-并表示颜色的柱坐标表示。色调是色轮上的度数(从0到360)-0或360是红色,120是绿色,240是蓝色。饱和度是一个百分比值;0%表示灰色阴影,100%表示全色。亮度也是一个百分比;0%是黑色,100%是白色。
    示例
    hsl(120, 100%, 50%); //绿色
    hsl(120, 100%, 75%); //浅绿色
    hsl(120, 100%, 25%); //深绿色
    hsl(120, 60%, 70%); //淡绿色
    hsla(hue,saturation,lightness,alpha)
    使用色调饱和度明度Alpha(HSLA)模型设置颜色。HSLA颜色值是HSL颜色值的扩展,具有alpha通道-该通道指定颜色的不透明度。alpha参数是介于0.0(完全透明)和1.0(完全不透明)之间的数字。
    示例
    hsla(120, 100%, 50%, 0.3); //不透明度为绿色
    hsla(120, 100%, 75%, 0.3); //浅绿色,不透明度
    grayscale(color)
    设置与颜色亮度相同的灰色。
    示例
    grayscale(#7fffd4);
    返回结果:#c6c6c6
    complement(color)
    设置颜色的互补色。
    示例
    complement(#7fffd4);
    返回结果:#ff7faa
    invert(color,weight)
    设置颜色的反色或负色。权重参数是可选的,必须是介于0%和100%之间的数字。默认值为100%。
    示例
    invert(white);
    返回结果:black
  • Sass 获取颜色函数

    函数 描述 & 示例
    red(color)
    以0到255之间的数字形式返回颜色的红色值。
    示例
    red(#7fffd4);
    返回结果:127
    red(red);
    返回结果:255
    green(color)
    以0到255之间的数字形式返回颜色的绿色值。
    示例
    green(#7fffd4);
    返回结果:255
    green(blue);
    返回结果:0
    blue(color)
    以0到255之间的数字形式返回颜色的蓝色值。
    示例
    blue(#7fffd4);
    返回结果:212
    blue(blue);
    返回结果:255
    hue(color)
    以介于0度和255度之间的数字形式返回颜色的色调。
    示例
    hue(#7fffd4);
    返回结果:160deg
    saturation(color)
    以介于0%和100%之间的数字返回颜色的HSL饱和度。
    示例
    saturation(#7fffd4);
    返回结果:100%
    lightness(color)
    以介于0%和100%之间的数字返回颜色的HSL亮度。
    示例
    lightness(#7fffd4);
    返回结果:74.9%
    alpha(color)
    将颜色的alpha通道返回为介于0和1之间的数字。
    示例
    alpha(#7fffd4);
    返回结果:1
    opacity(color)
    将颜色的alpha通道返回为介于0和1之间的数字。
    示例
    opacity(rgba(127, 255, 212, 0.5);
    返回结果:0.5
  • Sass 操作颜色函数

    函数 描述 & 示例
    mix(color1,color2,weight)
    创建颜色1和颜色2的混合。权重参数必须介于0%和100%之间。更大的重量意味着应该使用更多的color1。较小的重量意味着应该使用更多的color2。默认值为50%。
    adjust-hue(color,degrees)
    用-360度到360度的度数调整颜色的色调。
    示例
    adjust-hue(#7fffd4, 80deg);
    返回结果:#8080ff
    adjust-color(color,red,green,blue,hue,saturation,lightness,alpha)
    按指定量调整一个或多个参数。此函数用于在现有颜色值上加上或减去指定的量。
    示例
    adjust-color(#7fffd4, blue: 25);
    返回结果:
    change-color(color,red,green,blue,hue,saturation,lightness,alpha)
    缩放一个或多个颜色参数。
    rgba(color,alpha)
    使用给定的alpha通道创建新颜色。
    示例
    rgba(#7fffd4, 30%);
    返回结果: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之间。amount参数将alpha通道增加该量。
    fade-in(color,amount)
    创建一种更不透明的颜色,其数量介于0和1之间。amount参数将alpha通道增加该量。
    transparentize(color,amount)
    创建一种更透明的颜色,其数量介于0和1之间。amount参数将alpha通道减少该量。
    fade-out(color,amount)
    创建一种更透明的颜色,其数量介于0和1之间。amount参数将alpha通道减少该量。