Sass 颜色函数

更新日期: 2021-06-29阅读: 2k标签: Sass

本节我们来看一下 Sass 中的颜色函数,颜色函数可以分为三部分,分别是颜色设置、颜色获取以及颜色操作。Sass 中的颜色函数有很多,下面我们来看一些 Sass 中常用的颜色函数:

函数描述
rgb()创建一个 Red-Green-Blue(RGB) 色
rgba()创建一个带有透明度值的颜色
hsl()通过色相、饱和度和亮度的值创建一个颜色
hsla()通过色相、饱和度、亮度和透明的值创建一个颜色
red()从一个颜色中获取其中红色值
lightness获取一个颜色的亮度值(0% - 100%)
alpha将颜色的 alpha 通道返回为介于 0 和 1 之间的数字
opacity获取颜色透明度值(0-1)
mix()把两种颜色混合起来
fade-in()降低颜色的透明度,取值在 0-1 之。
fade-out()提升颜色的透明度,取值在 0-1 之间。

rgb()函数

rgb() 函数创建一个 Red-Green-Blue(RGB) 色,其中 R 表示红色,G表示绿色,B表示蓝色。RGB的取值范围在 0 到 255 之间。

示例:

这个函数我们应该比较熟悉了,在 css 中设置颜色值也会用到这个函数:

.xkd{
    background: rgb(240, 236, 122);
    color: rgb(15, 88, 96);
}

编译成 CSS 代码

.xkd {
  background: #f0ec7a;
  color: #0f5860;
}

需要注意的是 rgb() 函数中的参数值范围在 0 到 255 之前,不能超过 255,否则会失效。


rbga()函数

rbga() 函数的使用和 rgb() 函数差不多,都是用于创建颜色,但是 rgba() 中多了一个 alpha,也就是颜色透明度。颜色透明度的取值范围为 0 到 1 之间的小数,例如 0.1、0.2 0.3 等, 值越小颜色越透明。

示例:

例如我们给一个黑色设置透明度为 0.6:

.xkd{
    background: rgba(0, 0, 0, 0.6);
    color: rgb(0, 0, 0);
}

编译成 CSS 代码:

.xkd {
  background: rgba(0, 0, 0, 0.6);
  color: black;
}

大家可以自己试一下,当设置不同的透明度值时,会有什么效果。一般我们在制作网页时,会给一些背景颜色设置透明度。


hsl()函数

hsl() 函数可以通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色。

示例:
.xkd{
    color: hsl(100, 100%, 60%);
    a{
        color: hsl(255, 80%, 70%);
    }
}

编译成 CSS 代码:

.xkd {
  color: #77ff33;
}
.xkd a {
  color: #9475f0;
}


hsla()函数

hsla() 函数可以通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色。

示例:
.xkd{
    color: hsla(100, 100%, 60%, 0.8);
    a{
        color: hsla(255, 80%, 70%, 0.3);
    }
}

编译成 CSS 代码:

.xkd {
  color: rgba(119, 255, 51, 0.8);
}
.xkd a {
  color: rgba(148, 117, 240, 0.3);
}


red()函数

red() 函数用于从一个颜色中获取其中红色值,取值范围为 0 到 255。除了 red() 函数,还有 green() 函数和 blue() 函数。

示例:

例如获取一个颜色中的红色值、绿色值、蓝色值:

.xkd{
    content: red(#fecefc);
    content: green(#fecefc);
    content: blue(#fecefc);
}

编译成 CSS 代码:

.xkd {
  content: 254;
  content: 206;
  content: 252;
}

上述代码中,red() 函数用于从一个颜色中获取红色值,同理,green() 函数用于获取绿色值,blue() 函数用于获取蓝色值。

我们可以试一下在 rgb() 函数中使用这三个获取到的数值,看看创建的颜色是否同 #fecefc 一样:

rgb(254, 206, 252)


lightness()函数

lightness() 函数获取一个颜色的亮度值,取值范围为0% 到 100%。

示例:

例如获取不同颜色值的亮度:

.xkd{
    content:lightness(#cccccc);
    content:lightness(#ff0000);
}

编译成 CSS 代码:

.xkd {
  content: 80%;
  content: 50%;
}

根据输出结果可以看出,#cccccc 颜色的亮度为 80%,#ff0000 的亮度为 50% 。


alpha()函数

alpha() 函数将颜色的 alpha 通道返回为介于 0 和 1 之间的数字。

示例:
.xkd{
    content:alpha(pink);
    content:alpha(rgba(125, 125, 125, 0.6));
}

编译成 CSS 代码:

.xkd {
  content: 1;
  content: 0.6;
}


opacity()函数

opacity() 函数用于获取颜色透明度值,取值范围在 0 到 1 之间。

示例:
.xkd{
    content:opacity(rgba(212, 234, 124, 0.1));
    content: opacity(red);
}

编译成 CSS 代码:

.xkd {
  content: 0.1;
  content: 1;
}


mix()函数

mix() 函数用于将两种颜色混合起来,可以组成一个新的颜色值。

示例:

例如我们将蓝色和绿色混合起来:

.xkd{
    content:mix(blue, green);
}

编译成 CSS 代码:

.xkd {
  content: #004080;
}

编译后,组成了一个新的颜色 #004080。


fade-in()函数

fade-in() 函数降低颜色的透明度,取值在 0 到 1 之间。

示例:
.xkd{
    content:fade-in(rgba(100, 100, 255, 0.7), 0.1);
}

编译成 CSS 代码:

.xkd {
  content: rgba(100, 100, 255, 0.8);
}

可以看到,编译后的代码中,透明度由原来的 0.7 变为了 0.8。因为值越小透明度越高,反之值越大,透明度越低。


fade-out()函数

fade-out() 函数提升颜色的透明度,取值在 0 到 1 之间。

示例:
.xkd{
    content:fade-out(rgba(100, 100, 255, 0.7), 0.1);
}

编译成 CSS 代码:

.xkd {
  content: rgba(100, 100, 255, 0.6);
}

上述代码中,透明度由 0.7 提升到 0.6,值越小越透明。


链接: https://www.fly63.com/article/detial/10485

Sass简单、快速上手_Sass快速入门学习笔记总结

Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言 ,除了Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。 这篇文章关于Sass快速入门学习笔记。

SASS简介及使用方法

Sass是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这篇文章介绍:基本语法(变量、计算功能、嵌套、注释、继承、混合、颜色函数、引入外部文件)、高级用法(函数 function、if条件语句、循环语句)

SCSS提取和懒加载

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。

webpack配置sass模块的加载

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要安装sass的依赖包

4种灵活的Scss编译输出风格整理

很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:

Vue-cli 3.0 使用Sass Scss Less预处理器

项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less;你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。

sass和less的优缺点

sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

原生 CSS “杀死” 预处理器 Sass!

我也无意中(至少在开始时)从我的代码库中删除了所有Sass的痕迹。这不是我打算做的事情,但是我看到我的旧Sass文件的次数越多,我就会更加地质疑它是否为我的网站增加了价值,或者只是增加了额外的复杂性和依赖性

Sass和Less的区别?

这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?

SCSS 常用属性合集

Scss 文档太多了,但还是耐心看完了,总结自己常用的一些语法。Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!