Sass的函数整理

更新日期: 2021-11-23阅读量: 25标签: Sass

说明

Sass 定义了各种类型的函数,这些函数可以通过 css 语句直接调用。可以看到Sass的函数功能已经相当丰富了。整理了Sass的主要函数,重点在于后面的颜色函数,设计非常的银杏!

String(字符串) 函数

quote(string)

给字符串添加引号

quote(hello) //"hello"
unquote(string)

移除字符串的引号

unquote("hello") //hello
str-index(stringsubstring)

返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串,则返回 null。区分大小写。

 str-index(abcd, a) // 1 
 str-index(abcd, ab) // 1 
 str-index(abcd, X)  // null 
str-insert(stringinsertindex)

在字符串 string 中 index 位置插入 insert。

str-insert("Hello world!", " xiaoming", 6) //"Hello xiaoming world!"
str-length(string)

返回字符串的长度。

str-length("hello") //5
str-slice(stringstartend)

从 string 中截取子字符串,通过 start-at 和 end-at 设置始末位置,未指定结束索引值则默认截取到字符串末尾。

是不是感觉合js的操作有些类似。

str-slice("abcd", 2, 3)   => "bc" 
str-slice("abcd", 2)      => "bcd" 
str-slice("abcd", -3, -2) => "bc" 
str-slice("abcd", 2, -2)  => "bc"
to-lower-case(string)

将字符串转成小写

to-lower-case("HELLO") // "hello"
to-upper-case(string)

将字符串转成大写

to-upper-case("hello") // "HELLO"
unique-id()

返回一个无引号的随机字符串作为 id。

不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。

unique-id() // 3a153b3ds

数字函数

abs(number)

返回一个数值的绝对值。

abs(13) // 13
abs(-13) // 13
comparable(num1num2)

返回一个布尔值,判断 num1 与 num2 是否可以进行比较 ,注意是否可以比较,不是比较的结果。

comparable(15px, 10px) // true 
comparable(20mm, 1cm) // true 
comparable(35px, 2em) // false
ceil(number)

向上取整 。

ceil(13.24) //14
floor(number)

向下取整 。

floor(15.84) // 15
max(number...)

返回最大值 。

max(5, 7, 9, 0, -3, -7) // 9
min(number...)

返回最小值 。

min(7, 2, 0, -2, -7) // -7
percentage(number)

将数字转化为百分比的表达形式。

percentage(1.2) // 120
random()

返回 0-1 区间内的小数。

random() // 0.2783
random(number)

返回 1 至 number 之间的整数,包括 1 和 limit。

random(10) // 4
round(number)

返回最接近该数的一个整数,四舍五入。

round(15.20) // 15 
round(15.80) // 16

列表(List)函数

三大注意点:

1、Sass 列表(List)函数用于处理列表,可以访问列表中的值,向列表添加元素,合并列表等。

2、Sass 列表是不可变的,因此在处理列表时,返回的是一个新的列表,而不是在原有的列表上进行修改。

3、列表的起始索引值为 1,记住不是 0。

append(listvalue, [separator])

将单个值 value 添加到列表尾部。separator 是分隔符,默认会自动侦测,或者指定为逗号或空格。

append((a b c), d) // a b c d 
append((a b c), (d), comma) // a, b, c, d
index(listvalue)

返回元素 value 在列表中的索引位置。

index(a b c, b) // 2 
index(a b c, f) // null
is-bracketed(list)

判断列表中是否有中括号

is-bracketed([a b c]) // true 
is-bracketed(a b c) // false
list-separator(list)

返回一列表的分隔符类型。可以是空格或逗号。

list-separator(a b c) // "space" 
list-separator(a, b, c) // "comma"
join(list1list2, [separator, bracketed])

合并两列表,将列表 list2 添加到列表 list1 的末尾。

separator 是分隔符,默认会自动侦测,或者指定为逗号或空格。

bracketed 默认会自动侦测是否有中括号,可以设置为 true 或 false。

join(a b c, d e f) // a b c d e f 
join((a b c), (d e f), comma) // a, b, c, d, e, f 
join(a b c, d e f, $bracketed: true) // [a b c d e f]
length(list)

返回列表的长度

length(a b c) // 3
set-nth(listnvalue)

设置列表第 n 项的值为 value

set-nth(a b c, 2, x) // a x c
nth(listn)

获取第 n 项的值。

nth(a b c, 3) // c
zip(lists)

将多个列表按照以相同索引值为一组,重新组成一个新的多维度列表。这个排列组合非常的人性,需要安排!

zip(1px 2px 3px, solid dashed dotted, red green blue) 
// 1px solid red, 2px dashed green, 3px dotted blue

Map(映射)函数

Sass Map 是不可变的,因此在处理 Map 对象时,返回的是一个新的 Map 对象,而不是在原有的 Map 对象上进行修改。

Map(映射)对象是以一对或多对的 key/value 来表示。

瞧!key/value这不就来了吗

map-get(mapkey)

返回 Map 中 key 所对应的 value(值)。如没有对应的 key,则返回 null 值。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-get($font-sizes, "small") // 12px
map-has-key(mapkey)

判断 map 是否有对应的 key,存在返回 true,否则返回 false。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-has-key($font-sizes, "big") // false
map-keys(map)

返回 map 中所有的 key 组成的队列。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-keys($font-sizes) // "small", "normal, "large"
map-values(map)

返回 map 中所有的 value 并生成一个队列。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-values($font-sizes) // 12px, 18px, 24px
map-merge(map1map2)

合并两个 map 形成一个新的 map 类型,即将 map2 添加到 map1的尾部

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
$font-sizes2: ("x-large": 30px, "xx-large": 36px)

map-merge($font-sizes, $font-sizes2) 
//"small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px
map-remove(mapkeys...)

移除 map 中的 keys,多个 key 使用逗号隔开。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-remove($font-sizes, "small") // ("normal": 18px, "large": 24px) 
map-remove($font-sizes, "small", "large") // ("normal": 18px)

选择器函数

这个可算得上是高级操作了,没有见过其他大神怎么去使用。

is-superselector(supersub)

比较两个选择器匹配的范围,即判断 super 选择器是否包含了 sub 选择器所匹配的范围,是的话返回 true,否则返回 false。

is-superselector("div", "div.myInput") // true 
is-superselector("div.myInput", "div") // false 
is-superselector("div", "div") // true
selector-append(selectors)

将第二个 (也可以有多个) 添加到第一个选择器的后面。 selector.

selector-append("div", ".myInput") // div.myInput 
selector-append(".warning", "__a") 结果: .warning__a
selector-nest(selectors)

返回一个新的选择器,该选择器通过提供的列表选择器生成一个嵌套的列表。

selector-nest("ul", "li") // ul li 
selector-nest(".warning", "alert", "div") // .warning div, alert div
selector-parse(selector)

将字符串的选择符 selector 转换成选择器队列。

selector-parse("h1 .myInput .warning") // ('h1' '.myInput' '.warning')
selector-replace(selectororiginalreplacement)

给定一个选择器,用replacement 替换 original 后返回一个新的选择器队列。

selector-replace("p.warning", "p", "div") // div.warning
selector-unify(selector1selector2)

将两组选择器合成一个复合选择器。如两个选择器无法合成,则返回 null 值。

selector-unify("myInput", ".disabled") // myInput.disabled 
selector-unify("p", "h1") // null
simple-selectors(selectors)

将合成选择器拆为单个选择器。

simple-selectors("div.myInput") // div, .myInput 
simple-selectors("div.myInput:before") // div, .myInput, :before

颜色函数(一)颜色设置

对颜色的设置和编辑永远是前端设计的首要一步。

rgb(redgreenblue)

创建一个 Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示红色,而 G 是 "green" 绿色,B 是 "blue" 蓝色。

rgb(0, 255, 255);
rgba(redgreenbluealpha)

根据红、绿、蓝和透明度值创建一个颜色。

rgba(0, 255, 255, 0.3);
hsl(huesaturationlightness)

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

hsl(120, 100%, 50%); // 绿色 
hsl(120, 100%, 75%); // 浅绿色 
hsl(120, 100%, 25%); // dark green 
hsl(120, 60%, 70%); // 柔和的绿色 
hsla(huesaturationlightnessalpha)

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

hsl(120, 100%, 50%, 0.3); // 绿色带有透明度 
hsl(120, 100%, 75%, 0.3); // 浅绿色带有透明度
grayscale(color)

将一个颜色变成灰色,相当于 desaturate( color,100%)。

grayscale(#7fffd4); // #c6c6c6
complement(color)

返回一个补充色,相当于adjust-hue($color,180deg)。

complement(#7fffd4); // #ff7faa
invert(colorweight)

返回一个反相色,红、绿、蓝色值倒过来,而透明度不变。

invert(white); // black

颜色函数(二)颜色获取

看到下面这些参数,你会发现,这不是我美颜的常用设置吗,这我熟呀。

red(color)

从一个颜色中获取其中红色值(0-255),可用于取出某个hex颜色中的红色值。

red(#7fffd4); // 127 
red(red); // 255
green(color)

从一个颜色中获取其中绿色值(0-255)。

green(#7fffd4); // 255 
green(blue); // 0
blue(color)

从一个颜色中获取其中蓝色值(0-255)。

blue(#7fffd4); // 212 
blue(blue); // 255
hue(color)

返回颜色在 HSL 色值中的角度值 (0deg - 255deg)。

hue(#7fffd4); // 160deg
saturation(color)

获取一个颜色的饱和度值(0% - 100%)。

saturation(#7fffd4); // 100%
lightness(color)

获取一个颜色的亮度值(0% - 100%)。

lightness(#7fffd4); // 74.9%
alpha(color)

返回颜色的alpha,返回值为0 或1。

alpha(#7fffd4); // 1
opacity(color)

获取颜色透明度值(0-1)。

opacity(rgba(127, 255, 212, 0.5); // 0.5

颜色函数(三)颜色操作

mix(color1color2weight)

把两种颜色混合起来。

weight 参数必须是 0% 到 100%。默认 weight 为 50%,表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%,那表明新颜色为 25% color1 和 75% color2 的色值相加。

adjust-hue(colordegrees)

通过改变一个颜色的色相值(-360deg - 360deg),创建一个新的颜色。

adjust-hue(#7fffd4, 80deg); // #8080ff
rgba(coloralpha)

根据红、绿、蓝和透明度值创建一个颜色。

rgba(#7fffd4, 30%); // rgba(127, 255, 212, 0.3)
lighten(coloramount)

通过改变颜色的亮度值(0% - 100%),让颜色变亮,创建一个新的颜色。

darken(coloramount)

通过改变颜色的亮度值(0% - 100%),让颜色变暗,创建一个新的颜色。

saturate(coloramount)

提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount)

desaturate(coloramount)

调低一个颜色的饱和度后产生一个新的色值。同样,饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)

opacify(coloramount)

降低颜色的透明度,取值在 0-1 之。等价于 adjust-color(color, alpha: amount)

fade-in(coloramount)

降低颜色的透明度,取值在 0-1 之。等价于 adjust-color(color, alpha: amount)

transparentize(coloramount)

提升颜色的透明度,取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)

fade-out(coloramount)

提升颜色的透明度,取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)

总结

函数那么多,记肯定是记不住的,只有是实际开发过程中使用到,当然也可以尽可能的去使用,对scss的函数的熟悉感才会有比较明显的进步。总结了一遍,有许多用过的,有部分看到别人用过的,有部分没有看到过的,慢慢明白是怎样一回事了,这可能就是这篇文章的收获吧。

转载:https://segmentfault.com/a/1190000041007461


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

如何使用SASS编写可重用的CSS?

Sass 是一个CSS预处理程序,至今使用广泛,它之所以流行,是因为它修复了几个CSS缺陷:Sass 也是 Bootstrap 4 运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的

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

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

前端Vue框架在PostCSS怎样使用sass

众所周知转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不常用的配置。将成为vw优先单位使用,以rem作为回退模式。考虑到vw在移动设备的支持度不如rem

Sass 颜色函数

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

CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?

最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。

让 JavaScript 与 CSS 和 Sass 对话

JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 Sass 变量。

SASS简介及使用方法

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

node-sass是什么?

Node-sass是一个库,它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)。它允许用户以令人难以置信的速度将.scss文件本地编译为css,并通过连接中间件自动编译

Sass和Less的区别?

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

SCSS 常用属性合集

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

点击更多...

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