sass 内置函数 - 颜色
参考
sass:color
获取颜色单个值
1. alpha($color)
返回值：返回传入的color的透明度alpha的值（0-1之间的数字）
内置方法的定义 color.alpha($color)
@debug alpha(#e1d7d2); // 1
@debug opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)
2. blue($color)
返回值：返回传入的color的蓝色通道值（0-255之间的数字）
内置方法的定义 color.blue($color)
@debug blue(#e1d7d2); // 210
@debug blue(white); // 255
@debug blue(black); // 0
3. green($color)
返回值：返回传入的color的绿色通道值（0-255之间的数字）
内置方法的定义 color.green($color)
@debug green(#e1d7d2); // 215
@debug green(white); // 255
@debug green(black); // 0
4. hue($color)
返回值：返回传入的color的hue值（0deg-255deg之间的数字）
内置方法的定义 color.hue($color)
@debug hue(#e1d7d2); // 20deg
@debug hue(#f2ece4); // 34.2857142857deg
@debug hue(#dadbdf); // 228deg
5. lightness($color)
返回值：返回传入的color的HSL 亮度值（0%-100%之间的数字）
内置方法的定义 color.lightness($color)
@debug lightness(#e1d7d2); // 85.2941176471%
@debug lightness(#f2ece4); // 92.1568627451%
@debug lightness(#dadbdf); // 86.4705882353%
6. red($color)
返回值：返回传入的color的红色通道值（0-255之间的数字）
内置方法的定义 color.red($color)
@debug red(#e1d7d2); // 225
@debug red(white); // 255
@debug red(black); // 0
7. saturation($color)
返回值：返回传入的color的HSL饱和度（0%-100%之间的数字）
内置方法的定义 color.saturation($color) //=> number
@debug saturation(#e1d7d2); // 20%
@debug saturation(#f2ece4); // 30%
@debug saturation(#dadbdf); // 7.2463768116%
8. mix(
color2, $weight: 50%)
返回值：返回一个由 $color1 和$color2混合而成的数字
内置方法的定义 color.mix($color1, $color2, $weight: 50%) //=> color
@debug mix(#036, #d2e1dd); // #698aa2
@debug mix(#036, #d2e1dd, 75%); // #355f84
@debug mix(#036, #d2e1dd, 25%); // #9eb6bf
@debug mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)
颜色透明度调整
1. opacify(
amount)
1. fade-in(amount)
说明：增加不透明度；将传入的amount进行增加
参数：$amout必须是 0 - 1 之间的小数
等同于：color.adjust($color, $alpha: -$amount)
@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
// 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)
2. transparentize(amount)
2. fade-out(amount)
说明：降低不透明度；将传入的amount进行降低
参数：$amout必须是 0 - 1 之间的小数
等同于：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 scale(rgba(#036, 0.3), $alpha: -30%); // rgba(0, 51, 102, 0.21)
颜色Hue的调整
1. adjust-hue(degrees)
说明：在传入的color的基础上调整（增/减）hue，返回一个新的color值
返回值：color
参数： 其中$degrees必须是(-360deg, 360deg)
@debug adjust-hue(#6b717f, 60deg); // #796b7f —— Hue 222deg becomes 282deg
2. darken(amount)
说明：调暗颜色；将传入的amount进行降低
参数：$amout必须是 0% - 100% 之间
等同于：color.adjust($color, $lightness: -$amount)
// 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
2. lighten(amount)
说明：调亮颜色；将传入的amount进行增高
参数：$amout必须是 0% - 100% 之间
等同于：color.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
3. desaturate(amount)
说明：降低颜色饱和度；将传入的amount进行降低
参数：$amout必须是 0% - 100% 之间
等同于：color.adjust($color, $saturation: -$amount)
// 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
3. saturate(amount)
返回值：增加饱和度；将传入的amount进行增加
内置方法的定义 color.saturate($color, $amount) //=> color
等同于：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 scale(#0e4982, $saturation: 30%); // #0a4986
颜色的转换
1. complement($color)
说明：将传入的color值转换为完整的RGB格式返回
等同于： color.adjust($color, $hue: 180deg)
内置方法的定义 color.complement($color)
// 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
2. ie-hex-str($color)
说明：返回一个符合IE浏览器 -ms-filter 属性的无引号字符串颜色值，该颜色值符合 #AARRGGBB 格式
返回值：返回无引号字符串
内置方法的定义 color.ie-hex-str($color)
@debug ie-hex-str(#b37399); // #FFB37399
@debug ie-hex-str(#808c99); // #FF808C99
@debug ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
3. grayscale($color)
说明：返回一个与传入的$color 有同样亮度值的灰色色度的color
等同于： color.change($color, $saturation: 0%)
内置方法的定义 color.grayscale($color)
@debug grayscale(#6b717f); // #757575
@debug grayscale(#d2e1dd); // #dadada
@debug grayscale(#036); // #333333
4. invert(weight: 100%)
说明：Returns the inverse or negative of $color.
参数：$weight 必须是 0% -100% 之间的数字。
-
$weight值越高意味着得到的 color 越接近于 negative； -
$weight值越低意味着得到的 color 越接近于原来传入的$color值； - 若
$weight值为50%那么得到的值永远都是#808080。
内置方法的定义 color.invert($color, $weight: 100%)
@debug invert(#b37399); // #4c8c66
@debug invert(black); // white
@debug invert(#550e0c, 20%); // #663b3a
高级函数
1. adjust-color
返回值 color
内置方法的定义（展示在这里是为了展示参数）
color.adjust($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$alpha: null)
示例
@debug adjust-color(#6b717f, $red: 15); // #7a717f
@debug adjust-color(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
@debug adjust-color(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)
2. change-color
内置方法的定义
color.change($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$alpha: null)
示例：
@debug change-color(#6b717f, $red: 100); // #64717f
@debug change-color(#d2e1dd, $red: 100, $blue: 50); // #64e132
@debug change-color(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)
3. scale-color(...)
返回值：流畅地缩放$color的一个或多个属性
内置方法的定义
color.scale($color,
$red: null, $green: null, $blue: null,
$saturation: null, $lightness: null,
$alpha: null)
网友评论