zoukankan      html  css  js  c++  java
  • sass-RGB颜色函数-RGB()颜色函数

    在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等。在这章节中,将主要和大家一起探讨 Sass 颜色函数中常见的 RGB、HSL 和 Opacity 函数。

    1、RGB颜色函数

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

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

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

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

    >> 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() 函数在实际中的运用。

  • 相关阅读:
    linux查看硬件信息的方法
    linux最常用命令
    研究php单例模式实现数据库类
    HTML5语义元素
    第一次博客作业
    2020系统综合实践 第7次实践作业 06组
    2020系统综合实践 第6次实践作业 06组
    2020系统综合实践 第5次实践作业
    2020系统综合实践 第4次实践作业
    2020系统综合实践 第3次实践作业
  • 原文地址:https://www.cnblogs.com/qjuly/p/9124773.html
Copyright © 2011-2022 走看看