上一节:

  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通道减少该量。
上一节: