Blog A Paranoid Guy

sass入门笔记---颜色函数

2016-05-09
CSS

RGB颜色函数

rgb颜色只是颜色中的一种表达方式,其中Rred表示红色,而Ggreen绿色,Bblue蓝色。在Sass中为RGB颜色提供六种函数:

  • rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
  • rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
  • red($color):从一个颜色中获取其中红色值;
  • green($color):从一个颜色中获取其中绿色值;
  • blue($color):从一个颜色中获取其中蓝色值;
  • mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。

HSL颜色函数

  • hsl($hue,$saturation,$lightness):通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色;
  • hsla($hue,$saturation,$lightness,$alpha):通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色;
  • hue($color):从一个颜色中获取色相(hue)值;
  • saturation($color):从一个颜色中获取饱和度(saturation)值;
  • lightness($color):从一个颜色中获取亮度(lightness)值;
  • adjust-hue($color,$degrees):通过改变一个颜色的色相值,创建一个新的颜色;
  • lighten($color,$amount):通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色;
  • darken($color,$amount):通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
  • saturate($color,$amount):通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
  • desaturate($color,$amount):通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
  • grayscale($color):将一个颜色变成灰色,相当于desaturate($color,100%);
  • complement($color):返回一个补充色,相当于adjust-hue($color,180deg);
  • invert($color):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变

Opacity函数

  • alpha($color) /opacity($color):获取颜色透明度值;
  • rgba($color, $alpha):改变颜色的透明度值;
  • opacify($color, $amount) / fade-in($color, $amount):使颜色更不透明;
  • transparentize($color, $amount) / fade-out($color, $amount):使颜色更加透明

其他颜色函数

  • adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]):通过调整颜色一个属性或者多个属性获取新的颜色;
  • scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]):通过调整颜色的一个属性或者多个属性获取一个流畅颜色;
  • change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]):通过调整颜色的一个或者多个属性获取一个新颜色;
  • ie-hex-str($color):将一个颜色转换成适合ie滤镜使用的颜色

Comments