Sass基础——颜色函数

色彩是设计的一个美妙元素和一个至关重要的工具,同时他能帮助你更好的抓住您的客户。更为重要的是,色彩能帮你表达某些特定的情感,把用户视线带到特点的地方或者帮助你传达信息。在Web设计中,主要依靠颜色来表达你的色彩。

如果你只是直接丢一堆颜色给用户,他们也不会集中注意力在你的设计上的。色彩很微妙,所以为了让色彩成为可被利用的工具我们必须正确使用它。像其他设计元素一样,色彩也要好好利用才能发挥它的魔力。

但实际中,仅依靠CSS常用的颜色功能并不能迅速帮我们锁定需要的颜色。特别在很多时候,设计师在设计图中并没有明显标注某个控件其他状态颜色值时,我们不得不依靠设计工具,获取相近色。可这种方法并不是理想方法,很多时候让你的颜色(特别对颜色不感冒的同学)偏离你的产品,直接让你无法抓住你的客户。

虽然这样的工作可以依靠工具完成,但对于一位码农来说,不停的在工具之间进行切换,真心的是蛋疼。为了让你今后不在蛋疼,Sass给我们提供了多种颜色函数,帮助大家快速,准确获取相应的颜色。

Sass的颜色函数

在Sass的官方文档中,列出了Sass的颜色函数清单,从大的方面主要分为RGBHSLOpacity三大类函数,当然其还包括一些其他颜色函数,比如说adjust-colorchange-color等等。

RGB颜色函数

rgb颜色只是颜色中的一种表达方式,其中R是“red"表示红色,而G是“green”绿色,B是“blue”蓝色。在Sass中为RGB颜色提供六种函数:

仅从概念上,或许大家没有太多的概念,我们通过下面的命令来做一个简单的测试:

$ sass -i //在终端运行这个命令,开启Sass的函数计算

接下来,分别在终端使用RGB函数来进行计算,看其最终结果:

$ sass -i
>> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值
#c82858
>> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
rgba(200, 40, 88, 0.65)
>> red(#c82858) //从#c82858颜色值中得到红色值200
200
>> green(#c82858) //从#c82858颜色值中得到绿色值40
40
>> blue(#c82858) //从#c82858颜色值中得到蓝色值88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65)两颜色按比例混合得到一个新颜色
rgba(200, 40, 80, 0.65105)

从上面的简单运算结果可以很清晰的知道。在RGB颜色函数中,在实际中常用的主要是rgba()mix()两个函数,而rgb()函数只能快速的将一个rgb颜色转换成十六进制颜色表达,red()green()blue()函数,只能取得某一颜色的一个值,对于颜色上使用并无太大作用(或许他的好处,我还没有理解过来)。接下来,主要来实战一下rgba()mix()函数在实际中的运用。

RGBA()函数

rgba()函数主要用来将一个颜色根据透明度转换成rgba颜色。其语法有两种格式:

rgba($red,$green,$blue,$alpha)//将一个rgba颜色转译出来,和未转译的值一样
rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色

其中rgba($color,$alpha)函数作用更大,主要运用在这样的情形之中。假设在实际中知道的颜色值是#f36或者red,但在使用中,需要给他们配上一个透明度,这个时候在原来的CSS中,首先需要通过制图工具,得到#f36red颜色的RGB值,而不能直接使用:

//CSS
color: rgba($f36,.5);//这是无效的写法

但在Sass中,RGBA()函数就能解决这个问题。我们先来看一个简单的例子,假设在变量中定义了一个基本的变量:

$color: #f36;
$bgColor: orange;
$borderColor:green;

同时给他们加上.65的透明度:

//SCSS
.rgba {
    color: rgba(#f36,.5);
    background: rgba(orange,.5);
    border-color: rgba(green,.5);
}

在这个实例中,我们使用了Sass的rgba函数,在括号是函数的参数,第一个参数是需要转换的颜色,他可以是任何颜色的表达方式,也可以是一个颜色变量;第二个参数是颜色的透明度,其值是0~1之间。上面的代码转译出来:

.rgba {
  color: rgba(255, 51, 102, 0.5);
  background: rgba(255, 165, 0, 0.5);
  border-color: rgba(0, 128, 0, 0.5);
}

在来看一个调用前面定义的变量:

//SCSS
.rgba {
    color: rgba($color,.5);
    background: rgba($bgColor,.5);
    border-color: rgba($borderColor,.5);
}

//CSS
.rgba {
  color: rgba(255, 51, 102, 0.5);
  background: rgba(255, 165, 0, 0.5);
  border-color: rgba(0, 128, 0, 0.5);
}

我想您应该会看到一个变化,通过rgba函数,指定一个透明值,将原色转换成另外一个颜色:

Sass基础——颜色函数

Mix()函数

Mix函数是将两种颜色根据一定的比例混合在一起,生成另一种颜色。具体地说,选择权重是每个RGB的百分比来衡量,当然透明度也会有一定的权重。其中指定的比例会包括在返回的颜色中。默认的的比例是50%,这意味着两个颜色各占一半,如果指定的比例是25%,这意味着第一个颜色所占比例为25%,第二个颜色所占比例为75%。其使用语法如下:

mix($color-1,$color-2,$weight);

$color-1$color-2指的是你需要合并的颜色,颜色可以是任何表达式,也可以是颜色变量。$weight合并的比例,默认值为50%,其取值范围是0~1之间。

其使用方法也很简单:

mix(#f00, #00f) => #7f007f
mix(#f00, #00f, 25%) => #3f00bf
mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

在前面的基础上,做一个修改:

//SCSS
$color1: #a63;
$color2: #fff;
$bgColor1: #f36;
$bgColor2: #e36;
$borderColor1:#c36;
$borderColor2:#b36;

.mix {
    background: mix($bgColor1,$bgColor2,.75);
    color: mix($color1,$color2,.25);
    border-color: mix($borderColor1,$bgColor2,.05);
}

//CSS
.mix {
    background: #ee3366;
    color: #fefefe;
    border-color: #ed33
}

看下对比效果:

Sass基础——颜色函数

这就是Mix函数的工作原理,在函数中指定三个函数,前两个函数是你想混合的颜色(记住,你可以通过颜色变量、十六进制、RGBA、RGB、HSL或者HSLA颜色值)。第三个参数是第一种颜色的比例值。

HSL颜色函数

HSL给我们带来了一个更直观的颜色控制,我们时常需要让一个颜色比另一个颜色更暗一点或者说更亮一点。比如说“a:hover”状态下我们需要把一个颜色变暗一点,那么使用“HSL”是非常方便的,反而我们使用十六进制那就需要更多的时间调试。而这个“HSL”他只是一个简单的数量变化。

“HSL”所表示的是“H:色相”,“S:饱和度”,“L:亮度”。色相是在色盘上的颜色(见下图),颜色的选择是使用饱和度:“0度是红色”,“120度为绿色”和“240度为蓝色”。

在看一个在线的HSL工具,会有更好的理解:

Sass基础——颜色函数

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-color-function.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部