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

最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20a0ff; .box{ box-shadow: 0 2px 6px 0 rgba($linkColor, 0.3); background-color: $linkColor; } 生成的 CSS 代码 .box{ box-shadow:0 2px 6px 0 rgba(32,160,255,.3)…

sass中有些非常实用的颜色处理函数,总结如下 1.颜色加深或变浅 lighten($color,$amount) //颜色变浅 darken($color,$amount) //颜色加深 例如: lighten(#f36,50%) //把#f36颜色亮度提高50% #ffffff darken(#f36,50%) //把#f36颜色亮度降低50% #33000d 2.rgb和十六进制转换 rgb($red, $green, $blue) //根据RGB中的三个值计算出一个颜色: rgba($r…

Mix 函数是将两种颜色根据一定的比例混合在一起,生成另一种颜色.其使用语法如下: mix($color-1,$color-2,$weight); $color-1 和 $color-2 指的是你需要合并的颜色,颜色可以是任何表达式,也可以是颜色变量. $weight 为 合并的比例(选择权重),默认值为 50%,其取值范围是 0~1 之间.它是每个 RGB 的百分比来衡量,当然透明度也会有一定的权重.默认的比例是 50%,这意味着两个颜色各占一半,如果指定的比例是 25%,这意味着第一个颜色所…

Red() 函数 red() 函数非常简单,其主要用来获取一个颜色当中的红色值.假设有一个 #f36 的颜色,如果你想得到 #f36 中的 red 值是多少,这个时候使用 red() 函数就能很简单获取. >> red(#f36) 255 得到的值是”255”. Green() 函数 green() 函数和 red() 函数一样,用来获取某一个颜色值中 green 的值.同样拿 ”#f36“ 颜色为例: >> green(#f36) 51 Blue() 函数 同理,blue() 函…

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

在 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()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.1.RGB颜色函数RGB 颜色只是颜色中的一种表达式,其中 R 是 red 表示红色,G 是 green 表示绿色而 B 是 blue 表示蓝色.在 Sass 中为 RGB 颜色提供六种函数: rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: rgba($red,$gre…

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

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