【Sass/SCSS】我花4小时整理了的Sass的函数([sass / SCSS] I spent 4 hours sorting out sass functions)

【Sass/SCSS】我花4小时整理了的Sass的函数

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

说明

Sass 定义了各种类型的函数,这些函数可以通过 CSS 语句直接调用。

可以看到Sass的函数功能已经相当丰富了。

整理了Sass的主要函数,重点在于后面的颜色函数,设计非常的银杏!

String(字符串) 函数

quote(string)

给字符串添加引号

quote(hello) //"hello"

unquote(string)

移除字符串的引号

unquote("hello") //hello

str-index(string, substring)

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

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

str-insert(string, insert, index)

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

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

str-length(string)

返回字符串的长度。

str-length("hello") //5

str-slice(string, start, end)

从 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(num1, num2)

返回一个布尔值,判断 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。

三大注意点:

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

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

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

append(list, value, [separator])

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

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

index(list, value)

返回元素 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(list1, list2, [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(list, n, value)

设置列表第 n 项的值为 value。

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

nth(list, n)

获取第 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(map, key)

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

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

map-has-key(map, key)

判断 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(map1, map2)

合并两个 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(map, keys…)

移除 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(super, sub)

比较两个选择器匹配的范围,即判断 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(selector, original, replacement)

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

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

selector-unify(selector1, selector2)

将两组选择器合成一个复合选择器。如两个选择器无法合成,则返回 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(red, green, blue)

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

rgb(0, 255, 255);

rgba(red, green, blue, alpha)

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

rgba(0, 255, 255, 0.3);

hsl(hue, saturation, lightness)

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

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

hsla(hue, saturation, lightness, alpha)

通过色相(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(color, weight)

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

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(color1, color2, weight)

把两种颜色混合起来。

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

adjust-hue(color, degrees)

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

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

rgba(color, alpha)

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

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

lighten(color, amount)

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

darken(color, amount)

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

saturate(color, amount)

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

desaturate(color, amount)

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

opacify(color, amount)

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

fade-in(color, amount)

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

transparentize(color, amount)

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

fade-out(color, amount)

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

总结

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

感谢

万能的网络
以及勤劳的自己,个人博客,GitHub测试,GitHub
公众号-归子莫,小程序-小归博客

万能的网络

以及勤劳的自己,个人博客,GitHub测试,GitHub

公众号-归子莫,小程序-小归博客

————————

[sass / SCSS] I spent 4 hours sorting out sass functions

< strong > blog description < / strong >

The information involved in this article comes from the Internet and personal summary, which means the summary of personal learning and experience. If there is any infringement, please contact me to delete it. Thank you!

The information involved in this article comes from the Internet and personal summary, which means the summary of personal learning and experience. If there is any infringement, please contact me to delete it. Thank you!

explain

Sass defines various types of functions that can be called directly through CSS statements.

You can see that sass has quite rich functions.

Finishing the main functions of SASS, focusing on the color function behind, the design is very simple!

String function

quote(string)

Add quotation marks to the string

quote(hello) //"hello"

unquote(string)

Remove quotation marks from string

unquote("hello") //hello

str-index(string, substring)

Returns the first occurrence of a substring substring in a string. Returns NULL if no substring matches. Case sensitive.

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

str-insert(string, insert, index)

Insert the index position in the string.

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

str-length(string)

Returns the length of a string.

str-length("hello") //5

str-slice(string, start, end)

The substring is intercepted from the string. The start and end positions are set through start at and end at. If the end index value is not specified, it is intercepted to the end of the string by default.

Does it feel that the operation of hejs is somewhat similar.

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)

Convert string to lowercase

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

to-upper-case(string)

Convert string to uppercase

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

unique-id()

Returns a random string without quotation marks as ID.

However, it can only ensure the uniqueness of this ID in a single sass compilation.

unique-id() // 3a153b3ds

Digital function

abs(number)

Returns the absolute value of a numeric value.

abs(13) // 13
abs(-13) // 13

comparable(num1, num2)

Return a Boolean value to judge whether num1 and num2 can be compared. Note whether they can be compared, not the result of comparison.

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

ceil(number)

Round up.

ceil(13.24) //14

floor(number)

Round down.

floor(15.84) // 15

max(number…)

Returns the maximum value.

max(5, 7, 9, 0, -3, -7) // 9

min(number…)

Returns the minimum value.

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

percentage(number)

Convert numbers to percentages.

percentage(1.2) // 120

random()

Returns the decimal in the range 0-1.

random() // 0.2783

random(number)

Returns an integer between 1 and number, including 1 and limit.

random(10) // 4

round(number)

Returns the integer closest to the number, rounded.

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

List function

Three points for attention:
1. The sass list function is used to process lists. You can access the values in the list, add elements to the list, merge lists, etc.
2. The sass list is immutable, so when processing the list, a new list is returned instead of modifying the original list.
3. The starting index value of the list is 1. Remember that it is not 0.

Three points for attention:

1. The sass list function is used to process lists. You can access the values in the list, add elements to the list, merge lists, etc.

2. The sass list is immutable, so when processing the list, a new list is returned instead of modifying the original list.

3. The starting index value of the list is 1. Remember that it is not 0.

append(list, value, [separator])

Adds a single value value to the end of the list. Separator is a separator, which is automatically detected by default, or specified as comma or space.

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

index(list, value)

Returns the index position of the element value in the list.

index(a b c, b) // 2 
index(a b c, f) // null

is-bracketed(list)

Determine whether there are brackets in the list

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

list-separator(list)

Returns the separator type of a list. It can be a space or a comma.

list-separator(a b c) // "space" 
list-separator(a, b, c) // "comma"

join(list1, list2, [separator, bracketed])

Merge the two lists and add list List2 to the end of list LIST1.

Separator is a separator, which is automatically detected by default, or specified as comma or space.

Bracketed will automatically detect whether there are brackets by default. It can be set to true or 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)

Returns the length of the list

length(a b c) // 3

set-nth(list, n, value)

Set the value of the nth item in the list to value.

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

nth(list, n)

Gets the value of item n.

nth(a b c, 3) // c

zip(lists)

Group multiple lists according to the same index value to form a new multi-dimensional list. This arrangement is very human and needs to be arranged!

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

Map function

Sass map is immutable, so when processing a map object, a new map object is returned instead of modifying the original map object.

Map objects are represented by one or more pairs of key / value.

Look! Key / value is coming

map-get(map, key)

Returns the value corresponding to the key in the map. If there is no corresponding key, null value will be returned.

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

map-has-key(map, key)

Judge whether the map has a corresponding key. If it exists, return true; otherwise, return false.

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

map-keys(map)

Returns the queue composed of all the keys in the map.

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

map-values(map)

Return all values in the map and generate a queue.

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

map-merge(map1, map2)

Merge the two maps to form a new map type, that is, add MAP2 to the tail of 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(map, keys…)

Remove the keys in the map. Multiple keys are separated by commas.

$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)

Selector function

This can be regarded as an advanced operation. I haven’t seen how other gods use it.

is-superselector(super, sub)

Compare the matching ranges of the two selectors, that is, judge whether the super selector contains the matching range of the sub selector. If yes, return true, otherwise return false.

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

selector-append(selectors)

Add a second (or multiple) selector after the first selector. selector.

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

selector-nest(selectors)

Returns a new selector that generates a nested list from the provided list selector.

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

selector-parse(selector)

Converts the selector of a string to a selector queue.

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

selector-replace(selector, original, replacement)

Given a selector, replace the original with replacement and return a new selector queue.

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

selector-unify(selector1, selector2)

Combine two sets of selectors into a composite selector. If the two selectors cannot be combined, a null value is returned.

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

simple-selectors(selectors)

Split the composite selector into a single selector.

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

Color function (I) color setting

Setting and editing colors is always the first step in front-end design.

rgb(red, green, blue)

Create a red green blue (RGB) color. Where R is “red” for red, G is “green” green and B is “blue”.

rgb(0, 255, 255);

rgba(red, green, blue, alpha)

Creates a color based on red, green, blue, and transparency values.

rgba(0, 255, 255, 0.3);

hsl(hue, saturation, lightness)

Create a color with hue, saturation, and lightness values.

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

hsla(hue, saturation, lightness, alpha)

Create a color with hue, saturation, lightness, and alpha values.

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

grayscale(color)

Change a color to gray, which is equivalent to destroy (color, 100%).

grayscale(#7fffd4); // #c6c6c6

complement(color)

Returns a supplementary color, equivalent to adjust hue ($color, 180DEG).

complement(#7fffd4); // #ff7faa

invert(color, weight)

Returns an inverse color. The values of red, green and blue are reversed, while the transparency remains unchanged.

invert(white); // black

Color function (II) color acquisition

When you see the following parameters, you will find that this is not a common setting for my beauty. I’m familiar with it.

red(color)

Get the red value (0-255) from a color, which can be used to get the red value in a hex color.

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

green(color)

Get the green value (0-255) from a color.

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

blue(color)

Get the blue value (0-255) from a color.

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

hue(color)

Returns the angle value (0DEG – 255deg) of the color in the HSL color value.

hue(#7fffd4); // 160deg

saturation(color)

Gets the saturation value of a color (0% – 100%).

saturation(#7fffd4); // 100%

lightness(color)

Gets the luminance value of a color (0% – 100%).

lightness(#7fffd4); // 74.9%

alpha(color)

Returns the alpha of the color, with a return value of 0 or 1.

alpha(#7fffd4); // 1

opacity(color)

Gets the color transparency value (0-1).

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

Color function (III) color operation

mix(color1, color2, weight)

Mix the two colors.

The weight parameter must be 0% to 100%. The default weight is 50%, indicating that 50% of the color values of Color1 and color2 are added for the new color. If the weight is 25%, it indicates that the new color is the sum of the color values of 25% Color1 and 75% color2.

adjust-hue(color, degrees)

Create a new color by changing the hue value of a color (- 360DEG – 360DEG).

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

rgba(color, alpha)

Creates a color based on red, green, blue, and transparency values.

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

lighten(color, amount)

Create a new color by changing the brightness value of the color (0% – 100%).

darken(color, amount)

Create a new color by darkening the color by changing the brightness value of the color (0% – 100%).

saturate(color, amount)

Increases the color saturation of incoming colors. Equivalent to adjust color (color, saturation: amount)

desaturate(color, amount)

Turn down the saturation of a color to produce a new color value. Similarly, the value range of saturation is 0% – 100%. Equivalent to adjust color (color, saturation: – amount)

opacify(color, amount)

Reduce the transparency of the color. The value is 0-1. Equivalent to adjust color (color, alpha: amount)

fade-in(color, amount)

Reduce the transparency of the color. The value is 0-1. Equivalent to adjust color (color, alpha: amount)

transparentize(color, amount)

Increase the transparency of the color. The value is between 0-1. Equivalent to adjust color (color, alpha: – amount)

fade-out(color, amount)

Increase the transparency of the color. The value is between 0-1. Equivalent to adjust color (color, alpha: – amount)

summary

There are so many functions that you can’t remember. Only when you use them in the actual development process, of course, you can use them as much as possible, and your familiarity with SCSS functions will make obvious progress. After summing up, there are many used, some have seen others used, and some have not seen. I slowly understand what is going on. This may be the harvest of this article.

感谢

Universal network
And hard-working yourself, personal blog, GitHub test, GitHub
The official account – the son of the Mo, a small program – little blog

Universal network

And hard-working yourself, personal blog, GitHub test, GitHub

The official account – the son of the Mo, a small program – little blog