• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • sass:color

    color.adjust()

    color.adjust($color,
      $red: null, $green: null, $blue: null,
      $hue: null, $saturation: null, $lightness: null,
      $whiteness: null, $blackness: null,
      $alpha: null)
    adjust-color(...) //=> color
    
    • 按固定数量,增加或减少$color的一个或多个属性。
    • 将为每个关键字参数传递的值添加到颜色的相应属性,并返回调整后的颜色。在指定 RGB 属性($red$green$blue)的同时指定 HSL 属性($hue$saturation$lightness),或同时指定 HWB 属性($hue$whiteness$blackness),是错误的。
    • 所有可选参数必须是数字。$red$green$blue参数必须是无单位的,并且介于-255 和 255(包括-255 和 255)之间。$hue参数必须具有单位或没有单位。$saturation$lightness$whiteness$blackness参数必须介于-100%和 100%(包括 100%)之间,并且不能是无单位的。$alpha参数必须是无单位的,并且介于-1 和 1(包括-1 和 1)之间。

    也可以看看:

  • color.scale(),用于流畅地缩放颜色的属性。
  • color.change(),用于设置颜色的属性。
  • @debug color.adjust(#6b717f, $red: 15); // #7a717f
    @debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
    @debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)
    


    adjust-hue()

    adjust-hue($color, $degrees) //=> color
    

    增加或减少$color的色调。

    $hue必须是介于-360 度和 360 度(含 360 度)之间的数字,才能添加到$color的色调中。它可以是无单位的,但不能有除度以外的任何单位。

    另请参见color.adjust(),它可以调整颜色的任何属性。

    ⚠️注意!
    因为adjust-hue()adjust()是要被遗弃的,因此它没有直接包含在新的模块系统中。代替adjust-hue($color,$amount),你可以写color.adjust($color,$hue:$amount)


    color.alpha()

    color.alpha($color)
    alpha($color)
    opacity($color) //=> number
    

    $color以 0 到 1 之间的数字的形式返回的 alpha 通道。

    作为一种特殊情况,它支持 Internet Explorer 语法alpha(opacity=20),为此它返回一个不带引号的字符串。

    • color.red(),用于获取颜色的红色通道。
    • color.green(),用于获得颜色的绿色通道。
    • color.blue(),用于获取颜色的蓝色通道。
    • color.hue(),用于获得颜色的色调。
    • color.saturation(),用于获得颜色的饱和度。
    • color.lightness(),以获得颜色的亮度。
    @debug color.alpha(#e1d7d2); // 1
    @debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4
    @debug alpha(opacity=20); // alpha(opacity=20)
    


    color.blackness()

    color.blackness($color) //=> number
    

    $color的 HWB 黑度返回为 0%到 100%之间的数字。

    • color.red(),用于获取颜色的红色通道。
    • color.green(),用于获得颜色的绿色通道。
    • color.hue(),用于获得颜色的色调。
    • color.saturation(),用于获得颜色的饱和度。
    • color.lightness(),以获得颜色的亮度。
    • color.whiteness(),用于获得颜色的白度。
    • color.alpha(),用于获取颜色的 Alpha 通道。
    @debug color.blackness(#e1d7d2); // 11.7647058824%
    @debug color.blackness(white); // 0%
    @debug color.blackness(black); // 100%
    


    color.blue()

    color.blue($color)
    blue($color) //=> number
    

    $color的蓝色通道返回为 0 到 255 之间的数字。

    • color.red(),用于获取颜色的红色通道。
    • color.green(),用于获得颜色的绿色通道。
    • color.hue(),用于获得颜色的色调。
    • color.saturation(),用于获得颜色的饱和度。
    • color.lightness(),以获得颜色的亮度。
    • color.whiteness(),用于获得颜色的白度。
    • color.blackness(),用于获得颜色的黑度。
    • color.alpha(),用于获取颜色的 Alpha 通道。
    @debug color.blue(#e1d7d2); // 210
    @debug color.blue(white); // 255
    @debug color.blue(black); // 0
    


    color.change()

    color.change($color,
      $red: null, $green: null, $blue: null,
      $hue: null, $saturation: null, $lightness: null,
      $whiteness: null, $blackness: null,
      $alpha: null)
    change-color(...) //=> color
    
    • 将颜色的一个或多个属性设置为新值。
    • 使用为每个关键字参数传递的值代替颜色的相应属性,并返回更改的颜色。在指定 RGB 属性($red$green$blue)的同时指定 HSL 属性($hue$saturation$lightness),或在指定 HWB 属性($hue$whiteness$blackness)的同时指定其中一个属性是错误的。
    • 所有可选参数必须是数字。$red$green$blue参数必须是无单位的,并且必须介于 0 和 255(包括 0 和 255)之间。$$hue参数必须具有单位或没有单位。$saturation$lightness$whiteness$blackness参数必须介于-100%和 100%(包括 100%)之间,并且不能是无单位的。$alpha参数必须是无单位的,并且介于-1 和 1(包括-1 和 1)之间。

    也可以看看:

    • color.adjust(),用于按固定量更改颜色的属性。
    • color.change(),用于设置颜色的属性。
    @debug color.change(#6b717f, $red: 100); // #64717f
    @debug color.change(#d2e1dd, $red: 100, $blue: 50); // #64e132
    @debug color.change(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)
    


    color.complement()

    color.complement($color)
    complement($color) //=> color
    

    返回$color的 RGB 补码。这与color.adjust($color,$hue: 180deg)

    // Hue 222deg becomes 42deg.
    @debug color.complement(#6b717f); // #7f796b
    
    // Hue 164deg becomes 344deg.
    @debug color.complement(#d2e1dd); // #e1d2d6
    
    // Hue 210deg becomes 30deg.
    @debug color.complement(#036); // #663300
    


    darken()

    darken($color, $amount)  //=> color
    

    使$color颜色更深。$amount必须是介于 0%和 100%(含 0%和 100%)之间的数字。将$color的 HSL 亮度减少该量。

    darken()函数将亮度降低一个固定的量,这通常不是预期的效果。要使颜色比以前暗一定百分比,请color.scale()改用。因为darken()通常不是使颜色变深的最佳方法,所以它不直接包含在新模块系统中。但是,如果必须保留现有的行为,darken($color,$amount)可以编写color.adjust($color,$lightness:-$amount)

    // #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
    @debug darken(#036, 30%); // black
    
    // scale() instead makes it 30% darker than it was originally.
    @debug color.scale(#036, $lightness: -30%); // #002447
    
    // Lightness 92% becomes 72%.
    @debug darken(#b37399, 20%); // #7c4465
    
    // Lightness 85% becomes 45%.
    @debug darken(#f2ece4, 40%); // #b08b5a
    
    // Lightness 20% becomes 0%.
    @debug darken(#036, 30%); // black
    


    desaturate()

    desaturate($color, $amount)  //=> color
    

    使$color饱和度降低。$amount必须是介于 0%和 100%(含)之间的数字。将 HSL 饱和度降低$color该量。

    desaturate()功能将饱和度降低了一个固定量,这通常不是预期的效果。要使颜色的饱和度比以前低一定百分比,请改用color.scale()。因为desaturate()通常不是降低颜色饱和度的最佳方法,所以它不直接包含在新模块系统中。但是,如果必须保留现有的行为,desaturate($color,$amount)可以编写color.adjust($color,$saturation:-$amount)

    // #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just returns gray.
    @debug desaturate(#d2e1dd, 30%); // #dadada
    
    // scale() instead makes it 30% less saturated than it was originally.
    @debug color.scale(#6b717f, $saturation: -30%); // #6e727c
    
    // Saturation 100% becomes 80%.
    @debug desaturate(#036, 20%); // #0a335c
    
    // Saturation 35% becomes 15%.
    @debug desaturate(#f2ece4, 20%); // #eeebe8
    
    // Saturation 20% becomes 0%.
    @debug desaturate(#d2e1dd, 30%); // #dadada
    


    color.grayscale()

    color.grayscale($color)
    grayscale($color)   //=> color
    

    返回与$color具有相同亮度的灰色。这与color.change($color,$saturation: 0%)相同。

    @debug color.grayscale(#6b717f); // #757575
    @debug color.grayscale(#d2e1dd); // #dadada
    @debug color.grayscale(#036); // #333333
    


    color.green()

    color.green($color)
    green($color)   //=> number 
    

    返回$color

    也可以看看:

    • color.red(),用于获取颜色的红色通道。
    • color.blue(),用于获取颜色的蓝色通道。
    • color.hue(),用于获得颜色的色调。
    • color.saturation(),用于获得颜色的饱和度。
    • color.lightness(),以获得颜色的亮度。
    • color.whiteness(),用于获得颜色的白度。
    • color.blackness(),用于获得颜色的黑度。
    • color.alpha(),用于获取颜色的 Alpha 通道。
    @debug color.green(#e1d7d2); // 215
    @debug color.green(white); // 255
    @debug color.green(black); // 0
    


    color.hue()

    color.hue($color)
    hue($color)   //=> number 
    

    $color的色调作为介于 0 度和 360 度之间的数字返回。

    也可以看看:

    • color.red(),用于获取颜色的红色通道。
    • color.green(),用于获得颜色的绿色通道。
    • color.blue(),用于获取颜色的蓝色通道。
    • color.saturation(),用于获得颜色的饱和度。
    • color.lightness(),以获得颜色的亮度。
    • color.whiteness(),用于获得颜色的白度。
    • color.blackness(),用于获得颜色的黑度。
    • color.alpha(),用于获取颜色的 Alpha 通道。
    @debug color.hue(#e1d7d2); // 20deg
    @debug color.hue(#f2ece4); // 34.2857142857deg
    @debug color.hue(#dadbdf); // 228deg
    


    color.hwb()

    color.hwb($hue $whiteness $blackness)
    color.hwb($hue $whiteness $blackness / $alpha)
    color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color
    

    返回具有给定色调、白度和黑度以及给定 alpha 通道的颜色。色调是介于 0 度和 360 度(包括 0 度和 360 度)之间的数字。白度和黑度是介于 0%和 100%(包括 0%和 100%)之间的数字。色调可以是无单位的,但白度和黑度必须有单位%。alpha 通道可以指定为 0 到 1(含)之间的无单位数,或 0%到 100%(含)之间的百分比。

    ⚠️注意!
    Sass 针对斜杠分隔值的特殊解析规则使得在使用颜色时很难传递$blackness$alpha的变量。color.hwb($hue $whiteness $blackness /$alpha)签名。考虑使用color.hwb($hue,$whiteness,$blackness,$alpha)
    @debug color.hwb(210, 0%, 60%); // #036
    @debug color.hwb(34, 89%, 5%); // #f2ece4
    @debug color.hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)
    


    color.ie-hex-str()

    color.ie-hex-str($color)
    ie-hex-str($color) //=> unquoted string 
    

    返回一个不带引号的字符串,该字符串表示Internet Explorer-ms-filter属性所需的#AARRGGBB格式的$color

    @debug color.ie-hex-str(#b37399); // #FFB37399
    @debug color.ie-hex-str(#808c99); // #FF808C99
    @debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
    


    color.invert()

    color.invert($color, $weight: 100%)
    invert($color, $weight: 100%) //=> color 
    

    返回$color的倒数或负数。$weight必须是介于 0%和 100%(含)之间的数字。权重越高,结果越接近负数;权重越低,结果越接近$color。$weight 50%将始终产生#808080

    @debug color.invert(#b37399); // #4c8c66
    @debug color.invert(black); // white
    @debug color.invert(#550e0c, 20%); // #663b3a
    


    lighten()

    lighten($color, $amount) //=> color
    

    使$color颜色更浅。$amount必须是介于 0%和 100%之间的数字(包括 0%和 100%)。将$color的 HSL 亮度增加该数量。

    ⚠️注意!
    lighten()函数的作用是增加一定量的亮度,这通常不是理想的效果。要使颜色比以前亮一定百分比,请改用scale()。由于lighten()通常不是使颜色变浅的最佳方法,因此它没有直接包含在新的模块系统中。但是,如果您必须保留现有行为,则可以将lighte($color$amount)写入adjust($color,$lightness:$amount)
    // #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
    @debug lighten(#e1d7d2, 30%); // white
    
    // scale() instead makes it 30% lighter than it was originally.
    @debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0
    
    // Lightness 46% becomes 66%.
    @debug lighten(#6b717f, 20%); // #a1a5af
    
    // Lightness 20% becomes 80%.
    @debug lighten(#036, 60%); // #99ccff
    
    // Lightness 85% becomes 100%.
    @debug lighten(#e1d7d2, 30%); // white
    


    color.lightness()

    color.lightness($color)
    lightness($color)  //=> number
    

    $color的 HSL 亮度返回为 0%到 100%之间的数字。

    也可以看看:

    • color.red(),用于获取颜色的红色通道。
    • color.green(),用于获得颜色的绿色通道。
    • color.blue(),用于获取颜色的蓝色通道。
    • color.hue(),用于获得颜色的色调。
    • color.saturation(),用于获得颜色的饱和度。
    • color.whiteness(),用于获得颜色的白度。
    • color.blackness(),用于获得颜色的黑度。
    • color.alpha(),用于获取颜色的 Alpha 通道。
    @debug color.lightness(#e1d7d2); // 85.2941176471%
    @debug color.lightness(#f2ece4); // 92.1568627451%
    @debug color.lightness(#dadbdf); // 86.4705882353%
    


    color.mix()

    color.mix($color1, $color2, $weight: 50%)
    mix($color1, $color2, $weight: 50%)  //=> color
    

    返回混合了$color1$color2的颜色。每种颜色的$weight和相对不透明度都决定了结果中每种颜色的数量。$weight必须是一个介于 0%和 100%(包括 0%和 100%)之间的数字。较大的权重表示$color1应该使用更多的权重,较小的权重表示$color2应该使用更多的权重。

    @debug color.mix(#036, #d2e1dd); // #698aa2
    @debug color.mix(#036, #d2e1dd, 75%); // #355f84
    @debug color.mix(#036, #d2e1dd, 25%); // #9eb6bf
    @debug color.mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)
    


    opacify()

    opacify($color, $amount)
    fade-in($color, $amount) //=> color
    

    变得$color更加不透明。$amount必须是介于 0 和 1(含)之间的数字。将$coloralpha通道增加该数量。

    ⚠️注意!
    opacify()函数将 alpha 通道增加固定量,这通常不是理想的效果。要使颜色比以前更不透明,使用百分比,请改用scale()。因为opacify()通常不是使颜色更不透明的最佳方法,所以它不直接包含在新模块系统中。但是,如果必须保留现有的行为,opacify($color,$amount)可以编写adjust($color,$alpha:-$amount)

    // rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully opaque color.
    @debug opacify(rgba(#036, 0.7), 0.3); // #036
    
    // scale() instead makes it 30% more opaque than it was originally.
    @debug color.scale(rgba(#036, 0.7), $alpha: 30%); // rgba(0, 51, 102, 0.79)
    
    @debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
    @debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
    @debug opacify(rgba(#036, 0.7), 0.3); // #036
    


    color.red()

    color.red($color)
    red($color) //=> number
    

    $color的红色通道返回为 0 到 255 之间的数字。

    也可以看看:

    • color.green(),用于获得颜色的绿色通道。
    • color.blue(),用于获取颜色的蓝色通道。
    • color.hue(),用于获得颜色的色调。
    • color.saturation(),用于获得颜色的饱和度。
    • color.lightness(),以获得颜色的亮度。
    • color.whiteness(),用于获得颜色的白度。
    • color.blackness(),用于获得颜色的黑度。
    • color.alpha(),用于获取颜色的 Alpha 通道。
    @debug color.red(#e1d7d2); // 225
    @debug color.red(white); // 255
    @debug color.red(black); // 0
    


    saturate()

    saturate($color, $amount) //=> color
    

    使$color饱和度更高。$amount必须是介于 0%和 100%(包括 0%和 100%)之间的数字。将 HSL 饱和度增加$color该量。

    ⚠️注意!
    saturate()函数的作用是将饱和度增加一个固定的量,这通常不是预期的效果。要使颜色比以前更饱和一定百分比,请改用scale()
    因为saturate()通常不是使颜色更饱和的最佳方法,所以它不直接包含在新模块系统中。但是,如果必须保留现有的行为,saturate($color,$amount)可以编写adjust($color,$saturation:$amount).
    // #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes fully saturated.
    @debug saturate(#0e4982, 30%); // #004990
    
    // scale() instead makes it 30% more saturated than it was originally.
    @debug color.scale(#0e4982, $saturation: 30%); // #0a4986
    
    // Saturation 50% becomes 70%.
    @debug saturate(#c69, 20%); // #e05299
    
    // Saturation 35% becomes 85%.
    @debug desaturate(#f2ece4, 50%); // #ebebeb
    
    // Saturation 80% becomes 100%.
    @debug saturate(#0e4982, 30%)  // #004990
    


    color.saturation()

    color.saturation($color)
    saturation($color) //=> number
    

    $color的 HSL 饱和度返回为 0%到 100%之间的数字。

    也可以看看:

    • color.red(),用于获取颜色的红色通道。
    • color.green(),用于获得颜色的绿色通道。
    • color.blue(),用于获取颜色的蓝色通道。
    • color.hue(),用于获得颜色的色调。
    • color.lightness(),以获得颜色的亮度。
    • color.whiteness(),用于获得颜色的白度。
    • color.blackness(),用于获得颜色的黑度。
    • color.alpha(),用于获取颜色的 Alpha 通道。
    @debug color.saturation(#e1d7d2); // 20%
    @debug color.saturation(#f2ece4); // 30%
    @debug color.saturation(#dadbdf); // 7.2463768116%
    


    color.saturation()

    color.scale($color,
      $red: null, $green: null, $blue: null,
      $saturation: null, $lightness: null,
      $whiteness: null, $blackness: null,
      $alpha: null)
    scale-color(...) //=> color
    

    流畅地缩放$color的一个或多个属性。每个关键字参数必须是一个介于-100%和 100%(包括 100%)之间的数字。这表示对应属性应从其原始位置向最大值(如果参数为正)或最小值(如果参数为负)移动的距离。这意味着,例如,$lightness:50%,将使所有颜色接近最大亮度的 50%,而不会使它们完全变白。

    将 RGB 属性($red$green$blue)与 HSL 属性($saturation$lightness)同时指定,或将其中任何一个属性与 HWB 属性($whiteness$blackness)同时指定其中任何一个都是错误的。

    也可以看看:

    • color.adjust(),用于按固定量更改颜色的属性。
    • color.change(),用于设置颜色的属性。
    @debug color.scale(#6b717f, $red: 15%); // #81717f
    @debug color.scale(#d2e1dd, $lightness: -10%, $saturation: 10%); // #b3d4cb
    @debug color.scale(#998099, $alpha: -40%); // rgba(153, 128, 153, 0.6)
    


    transparentize()

    transparentize($color, $amount)
    fade-out($color, $amount) //=> color 
    

    使$color变得更加透明。$amount必须是介于 0 和 1(含)之间的数字。将$color的 Alpha 通道减少该数量。

    ⚠️注意!
    transparentize()函数将 Alpha 通道减少一个固定的量,这通常不是我们想要的效果。要使颜色比以前更透明一定百分比,请改用color.scale()
    因为transparentize()通常不是使颜色更透明的最佳方法,所以它不直接包含在新模块系统中。但是,如果必须保留现有的行为,transparentize($color,$amount)可以编写color.adjust($color,$alpha:-$amount)
    // rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it returns a fully transparent color.
    @debug transparentize(rgba(#036, 0.3), 0.3); // rgba(0, 51, 102, 0)
    
    // scale() instead makes it 30% more transparent than it was originally.
    @debug color.scale(rgba(#036, 0.3), $alpha: -30%); // rgba(0, 51, 102, 0.21)
    
    @debug transparentize(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.3)
    @debug fade-out(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.1)
    @debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)
    


    color.whiteness()

    color.whiteness($color) //=> number 
    

    $color的 HWB 白度返回为 0%到 100%之间的数字。

    也可以看看:

    • color.red(),用于获取颜色的红色通道。
    • color.green(),用于获得颜色的绿色通道。
    • color.hue(),用于获得颜色的色调。
    • color.saturation(),用于获得颜色的饱和度。
    • color.lightness(),以获得颜色的亮度。
    • color.blackness(),用于获得颜色的黑度。
    • color.alpha(),用于获取颜色的 Alpha 通道。
    @debug color.whiteness(#e1d7d2); // 82.3529411765%
    @debug color.whiteness(white); // 100%
    @debug color.whiteness(black); // 0%
    

    上篇:内置模块

    下篇:sass:list