10天精通Sass 之 Sass颜色函数

Sass中颜色函数主要分为RGB、HSL和Opacity三大函数。

RGB颜色函数

  • [ ] rgb(red,green, $blue)将RGB颜色转换成十六进制颜色
  • [ ] rgba(color,alpha)将十六进制颜色和透明度值转换成RGBA颜色
  • [ ] red($color):从一个十六进制的颜色中获取其中的红色
  • [ ] green($color):从一个十六进制的颜色中获取其中绿红色
  • [ ] blue($color):从一个十六进制的颜色中获取其中的蓝色
  • [ ] mix(color1,color2, [weight]):将两种颜色混合成一种颜色

打开CMD，输入sass -i(已安装sass环境)，开启sass的函数计算。

>> rgb(20,10,20)

140a14

>>rgba(#140a14,0.5)

rgb(20,10,20，0.5)

>>red(#140a14)

20

>>green(#140a14)

20

>>blue(#140a14)

20

rgba(color,alpha)将一个Hex颜色转换为rgba颜色

假设在实际中知道的颜色值是 #f36 或者 red，但在使用中，需要给他们配上一个透明度，这个时候在原来的 CSS 中，首先需要通过制图工具，得到 #f36 或 red 颜色的 R、G、B 值，而不能直接使用（注意 css3 是可以的，但是存在浏览器兼容问题）

比如，我们在Sass中已经定义了颜色，此时需要给它们加上一个透明度。

$gobalColor: (
  default: red,
  hover: green
);
div{
  color: rgba(map-get($gobalColor, default), 0.5);
  background-color: rgba(map-get($gobalColor, hover), 0.5);
}

编译出来的CSS为：

div {
  color: rgba(255, 0, 0, 0.5);
  background-color: rgba(0, 128, 0, 0.5);
}

注意，$gobalColor括号后面必须加上分号。

Mix(color1,color2, [weight])函数

color1和color2 指的是需要合并的颜色，颜色可以是表达式，也可以是颜色变量。

weight是合并的比例，默认值为50%，取值范围在0-1之间。指定的值时第一个颜色所占的比重，第二个颜色占的比重为 1-weight

$gobalColor: (
  default: red,
  hover: green
);
div{
  color: mix(map-get($gobalColor, default), map-get($gobalColor, hover), 0.3);
}
span{
  color: mix(red, green, 0.3)
}

编译出来的CSS为：

div {
  color: #018000;
}

span {
  color: #018000;
}

HSL函数简介

HSL用色轮表示颜色值。Sass中提供了一系列关于HSL的颜色函数。

  • [ ] hsl(hue,saturation, $lightness): 根据色相、饱和度和亮度的值返回对应的HEX颜色
  • [ ] hsla(hue,saturation, lightness,alpha): 根据色相、饱和度、亮度和透明度的值返回对应的HEX颜色
  • [ ] hue($color)：从HEX颜色值中取得色相值
  • [ ] saturation($color): 从一个HEX颜色值中取得饱和度值
  • [ ] lightness($color):从一个HEX颜色值中取得亮度值
  • [ ] ajust-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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变

HSL色调饱和度亮度模式。

H色相 0~360圆环形式，以角度表示

S饱和度 0~1之间的小数

L亮度 0~1之间的小数

打开CMD，输入sass -i开启sass的计算功能。

>>hsl(200,0.2,0.5)

010101

>>hsla(200,0.2,0.5,0.4)

rgba(1,1,1,0.4)

>>hue(#cbc)

300deg

>>saturation(#cbc)

14.28571%

>>lightness(#cbc)

76.66667%

>>ajust-hue(#cbc, 150)

c4ccbb

>>lighten(#cbc, 0.5)

cdbccd

>>darken(#cbc, 0.8)

cab9ca

>>saturate(#cbc, 0.9)

cdbacd

>>desaturate(#cbc, 0.9)

cbbccb

>>grayscale(#cbc)

c4c4c4

>>complement(#cbc)

bbccbb

>>invert(#cbc)

334433

HSL 函数中最常见的是 lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和 invert() 几个函数。

lighten(color,amount)和darken(color,amount)函数

lighten(color,amount)和darken(color,amount)都是调整颜色的亮度值，lighten()让颜色变得更亮，darken()让颜色变得更暗。$amount的范围在0~1之间，不过常用的一般是3%~20%之间。

$defaultColor: #C53FB1;
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}

编译出来的CSS为:

.lighten {
  background: #d166c1;
}

.darken {
  background: #a13090;
}

可以通过lightness($color)来查看各个颜色的亮度值。

>>lightness(#c53FB1)

50.98039%

>>lightness(#d166c1)

60.98039%

>>lightness(#a13090)

40.98039%

saturate(color,amount)和desaturate(color,amount)调整颜色的饱和度

改变颜色的饱和度和改变颜色的亮度是一个道理。

需要注意的是，当颜色的饱和度为1时，是没法再提高饱和度的，而颜色的饱和度为0时，无法降低饱和度。

亮度也是同样的道理。

adjust-hue(color,degrees):改变一个颜色的色相值

$degrees可以是-360到+360之间的一个数值。也可以是百分数。

$bgcolor: #FF7E1B;

.btn{
    background-color: $bgcolor;
    border-color: adjust-hue($bgcolor, 40);
}

编译出来的CSS为:

.btn {
  background-color: #FF7E1B;
  border-color: #e8ff1b;
}

当色相值大于360deg时，就减去360(这一点，与圆的角度的道理相同)

grayscale($color)函数:将一个颜色变成灰色

grayscale(color)会将颜色的饱和度直接调至0，和desaturate(color, 100%)所起的功能是一样的。

$defaultColor: #BE1BFF;
div{
    color: grayscale($defaultColor);
    background-color: desaturate($defaultColor, 100%);
}

编译出来的CSS为:

div {
  color: #8d8d8d;
  background-color: #8d8d8d;
}

用saturation(#8d8d8d)查看饱和度，可以发现饱和度是0。

Opacity函数简介

opacity控制颜色的透明度。在Sass中也提供了一系列透明函数来处理颜色透明度

  • [ ] alpha(color)/opacity(color):获得透明度值
  • [ ] rgba(color,alpha)：改变颜色的透明度值
  • [ ] opacify(color,amount)/fade-in(color,amount):使颜色更不透明
  • [ ] transparentize(color,amount)/fade-out(color,amount):使颜色更加透明
alpha和opacity

>> alpha(blue)

1

>> alpha(rgba(blue,.5))

0.5

>> opacity(red)

1

>> opacity(rgba(red,.5))

0.5

opacity属性时css中专门用来指定透明度的一个属性，取值范围也在0-1之间，0表示完全透明，1表示不透明。使用alpha通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色等来指定透明度，而opacity属性只能指定整个元素的透明度。

opacify(color,amount)和fade-in(color,amount)函数

用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。其接受两个参数，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时，会以 1 计算，表示颜色不具有任何透明度。

>>opacify(rgba(red,0.5),0.2)

rgba(255,0,0,0.7)

>>fade-in(rgba(red,0.5),0.3)

rgba(255,0,0,0.8)

>>fade-in(rgb(red,0.6),0.5)

FF0000

透明度的加法运算

当不透明度的值加起来超过1时，fade-in和opacify都返回一个HEX颜色值。

transparentize(color,amount)和fade-out(color,amount)函数

transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反，让颜色更加的透明。这两个函数会让透明值做减法运算，当计算出来的结果小于 0 时会以 0 计算，表示全透明。

>>opacify(rgba(red,0.5),0.2)

rgba(255,0,0,0.3)

>>fade-in(rgba(red,0.5),0.3)

rgba(255,0,0,0.2)

>>fade-in(rgb(red,0.4),0.5)

rgba(255,0,0,0)

透明度的减法运算

时间： 2024-10-09 08:47:06

10天精通Sass 之 Sass颜色函数的相关文章

10天精通Sass 之 处理字符串与数字的函数

Sass的函数简介 Sass中自备了一系列的功能函数,包括: - 字符串函数 - 数字函数 - 列表函数 - 颜色函数 - Introspection函数 - 三元函数 除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数. 字符串函数 * unquote($string) * :删除字符串中的引号 * quote($string) * :给字符串加引号 unquote()函数 用来删除字符串的引号,如果这个字符串没有引号,则返回原始字符串. .test1 { conte

Sass关于颜色函数的乐趣

阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在最初使用Sass的时候,用的最多的颜色函数就是lighten($color, $amount)和darken($color, $amount),对于其他的函数,少之又少,真是弱爆了,有木有. 切图的时候,我的颜色全部是通过PS的吸管工具获取的,之后复制粘贴即可.如果我们熟悉了颜色标准,那以后我们对颜

Sass 颜色函数

1 /* 2 * Sass 颜色函数 3 * RGB 颜色函数 4 * 1. rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: 5 * rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值 6 * #c82858 7 * 2. rgba($red,$green,$blue,$alpha):根据红.绿.蓝和透明度值创建一个颜色: 8 * rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba

2-4 Sass的函数功能-颜色函数

RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.在这章节中,将主要和大家一起探讨 Sass 颜色函数中常见的 RGB.HSL 和 Opacity 函数. 1.RGB颜色函数 RGB 颜色只是颜色中的一种表达式,其中 R 是 red 表示红色,G 是 green 表示绿色而 B 是

Sass函数--颜色函数--HSL函数

HSL函数简介HSL颜色函数包括哪些具体的函数,所起的作用是什么: hsl($hue,$saturation,$lightness):通过色相(hue).饱和度(saturation)和亮度(lightness)的值创建一个颜色: hsla($hue,$saturation,$lightness,$alpha):通过色相(hue).饱和度(saturation).亮度(lightness)和透明(alpha)的值创建一个颜色: hue($color):从一个颜色中获取色相(hue)值: satu

Sass控制命令及函数知识整理

2017-07-07  20:17:17 最底部附结构图(实在是结构图太长了没办法) 2017-06-22  09:11:43 一.Sass的控制命令 [email protected]语句 @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块. 在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 示例::控制一个元素隐藏或显示的代码, 原理:定义一个混合宏,通过 @

sass玩转颜色总结笔记

变量: $color:#f00; 1.变浅和加深颜色,sass使用HSL标准来变浅或加深颜色 lighten($color,10%); darken($color,30%);                          2.颜色互补 complement(lighten($color,20%)); 3.反色函数 invert(lighten($color,30%)); invert($color); 4.色调调节 ajust-due($color,90deg); adjust-hue($c

sass学习--sass的函数功能（进阶篇）

1.字符串功能: unquote($string):删除字符串中的引号: quote($string):给字符串添加引号: To-upper-case($string):将字符串小写字母转换为大写字母 To-lower-case($string):将字符串大写字母转换为小写字母 unquote($string): //sass:unquote($string) .test2 { content: unquote("'Hello Sass!"); } .test3 { content:

Sass语言的一些函数

unquote()函数 unquote()函数主要是用来删除一个字符串中的引号,如果这个字符串没有带有引号,将返回原始的字符串.简单的使用终端来测试这个函数的运行结果: //SCSS?? .test1?{?? ????content:?unquote('Hello?Sass!');?? }.test2?{?? ????content:?unquote("'Hello?Sass!");?? }.test3?{?? ????content:?unquote("I'm?Web?De