sass 内置函数 - 颜色

2020-07-02 本文已影响0人陌上无人花自开否

sass 内置函数 - 颜色

参考

scss官网

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( $color1,$ 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( $color,$ amount)

1. fade-in( $color,$ amount)

说明：增加不透明度；将传入的 $color的不透明度根据传入的$ 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( $color,$ amount)

2. fade-out( $color,$ amount)

说明：降低不透明度；将传入的 $color的不透明度根据传入的$ 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( $color,$ degrees)

说明：在传入的color的基础上调整（增/减）hue，返回一个新的color值

返回值：color

参数：其中$degrees必须是(-360deg, 360deg)

@debug adjust-hue(#6b717f, 60deg); // #796b7f   —— Hue 222deg becomes 282deg

2. darken( $color,$ amount)

说明：调暗颜色；将传入的 $color的HSL亮度根据传入的$ 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( $color,$ amount)

说明：调亮颜色；将传入的 $color的HSL亮度根据传入的$ 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( $color,$ amount)

说明：降低颜色饱和度；将传入的 $color的HSL饱和度根据传入的$ 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( $color,$ amount)

返回值：增加饱和度；将传入的 $color的HSL饱和度根据传入的$ 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( $color,$ 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)

sass 内置函数 - 颜色

sass 内置函数 - 颜色

参考

sass:color

获取颜色单个值

1. alpha($color)

2. blue($color)

3. green($color)

4. hue($color)

5. lightness($color)

6. red($color)

7. saturation($color)

8. mix( $color1,$ color2, $weight: 50%)

颜色透明度调整

1. opacify( $color,$ amount)

1. fade-in( $color,$ amount)

2. transparentize( $color,$ amount)

2. fade-out( $color,$ amount)

颜色Hue的调整

1. adjust-hue( $color,$ degrees)

2. darken( $color,$ amount)

2. lighten( $color,$ amount)

3. desaturate( $color,$ amount)

3. saturate( $color,$ amount)

颜色的转换

1. complement($color)

2. ie-hex-str($color)

3. grayscale($color)

4. invert( $color,$ weight: 100%)

高级函数

1. adjust-color

2. change-color

3. scale-color(...)

猜你喜欢

热点阅读

sass 内置函数 - 颜色

sass 内置函数 - 颜色

参考

sass:color

获取颜色单个值

1. alpha($color)

2. blue($color)

3. green($color)

4. hue($color)

5. lightness($color)

6. red($color)

7. saturation($color)

8. mix(color2, $weight: 50%)

颜色透明度调整

1. opacify(amount)

1. fade-in(amount)

2. transparentize(amount)

2. fade-out(amount)

颜色Hue的调整

1. adjust-hue(degrees)

2. darken(amount)

2. lighten(amount)

3. desaturate(amount)

3. saturate(amount)

颜色的转换

1. complement($color)

2. ie-hex-str($color)

3. grayscale($color)

4. invert(weight: 100%)

高级函数

1. adjust-color

2. change-color

3. scale-color(...)

猜你喜欢

热点阅读

8. mix( $color1,$ color2, $weight: 50%)

1. opacify( $color,$ amount)

1. fade-in( $color,$ amount)

2. transparentize( $color,$ amount)

2. fade-out( $color,$ amount)

1. adjust-hue( $color,$ degrees)

2. darken( $color,$ amount)

2. lighten( $color,$ amount)

3. desaturate( $color,$ amount)

3. saturate( $color,$ amount)

4. invert( $color,$ weight: 100%)