[Sass/SCSS] Sass functions that I spent 4 hours finishing

[Sass/SCSS] Sass functions that I spent 4 hours finishing

Blog Description

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

illustrate

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

You can see that Sass's functions are quite rich.

Sorted out the main functions of Sass, focusing on the color function behind, the design is very ginkgo!

String function

quote(string)

Add quotes to the string

quote(hello) //"hello"

unquote(string)

Remove the quotes from the string

unquote("hello") //hello

str-index(string, substring)

Returns the position of the first occurrence of substring in string. If no substring is matched, null is returned. Case sensitive.

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

str-insert(string, insert, index)

Insert insert at the index position in the string string.

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

str-length(string)

Returns the length of the string.

str-length("hello") //5

str-slice(string, start, end)

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

Does it feel similar to the operation of 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)

Convert string to lowercase

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

to-upper-case(string)

Convert string to uppercase

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

unique-id()

Return an unquoted random string as id.

But it can only guarantee the uniqueness of this id in a single Sass compilation.

unique-id() // 3a153b3ds

Numerical function

abs(number)

Returns the absolute value of a number.

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

comparable(num1, num2)

Return a boolean value to determine whether num1 and num2 can be compared. Note whether it can be compared, not the result of the comparison.

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

ceil(number)

Rounded 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 into percentage expressions.

percentage(1.2) // 120

random()

Returns the decimal number 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 nearest integer to this number, rounded up.

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

List function

Three points of attention:

1. The Sass list (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 the list is processed, a new list is returned instead of modification on the original list.

3. The starting index of the list is 1, remember it is not 0.

append(list, value, [separator])

Add the single value value to the end of the list. separator is the separator, which is automatically detected by default, or it can be specified as a 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 value

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

Combine the two lists and add the list list2 to the end of the list1

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

bracketed will automatically detect whether there are brackets by default, which 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)

Return the length of the list

length(a b c) // 3

set-nth(list, n, value)

Set the value of item n value .

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

nth(list, n)

Get the value of n

nth(a b c, 3) // c

zip(lists)

The multiple lists are grouped with the same index value to form a new multi-dimensional list. This permutation and combination 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 the Map object, it returns a new Map object instead of modifying the original Map object.

The Map object is represented by one or more pairs of key/value.

Look! Isn't this the key/value?

map-get(map, key)

Return the value corresponding key If there is no corresponding key, a null value is returned.

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

map-has-key(map, key)

Determine whether map has a corresponding key , return true if it exists, otherwise return false.

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

map-keys(map)

Return a queue consisting of all keys in map

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

map-values(map)

Return map and generate a queue.

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

map-merge(map1, map2)

Combine the two maps to form a new map type, that is, map2 to the end 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 map , and separate multiple keys with 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, and I haven't seen how other great gods use it.

is-superselector(super, sub)

Compare the matching range of the two selectors, that is, determine whether the super selector contains 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 the second one (or more than one) to the back of 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)

A string selector Selector converted into the selected queue.

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

selector-replace(selector, original, replacement)

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

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

selector-unify(selector1, selector2)

Combine the 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 (1) color setting

The setting and editing of 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" means red, G is "green" green, and B is "blue" blue.

rgb(0, 255, 255);

rgba(red, green, blue, alpha)

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

rgba(0, 255, 255, 0.3);

hsl(hue, saturation, lightness)

Create a color by the values of hue, saturation, and lightness.

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 by the values of hue, saturation, lightness and alpha.

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

grayscale(color)

Turning a color into gray is equivalent to desaturate(color,100%).

grayscale(#7fffd4); // #c6c6c6

complement(color)

Returns a complementary color, which is equivalent to adjust-hue($color,180deg).

complement(#7fffd4); // #ff7faa

invert(color, weight)

Returns an inverted color, the red, green, and blue values are reversed, and the transparency is unchanged.

invert(white); // black

Color function (two) color acquisition

See the following parameters, you will find that this is not my common settings for beauty, I am 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 certain 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 of the color in the HSL color value (0deg-255deg).

hue(#7fffd4); // 160deg

saturation(color)

Get the saturation value (0%-100%) of a color.

saturation(#7fffd4); // 100%

lightness(color)

Get the brightness value (0%-100%) of a color.

lightness(#7fffd4); // 74.9%

alpha(color)

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

alpha(#7fffd4); // 1

opacity(color)

Get the color transparency value (0-1).

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

Color function (three) color operation

mix(color1, color2, weight)

Mix the two colors.

weight parameter must be 0% to 100%. The default weight is 50%, which means that the new color takes 50% of the color values of color1 and color2. If the weight is 25%, it means that the new color is the addition of the color values of 25% color1 and 75% color2.

adjust-hue(color, degrees)

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

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

rgba(color, alpha)

Create 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%) to make the color brighter.

darken(color, amount)

By changing the brightness value of the color (0%-100%), the color is darkened and a new color is created.

saturate(color, amount)

Increase the color saturation of the incoming color. Equivalent to adjust-color( color, saturation: amount)

desaturate(color, amount)

Lower the saturation of a color to produce a new color value. Similarly, the value range of saturation is between 0% and 100%. Equivalent to adjust-color(color, saturation: -amount)

opacify(color, amount)

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

fade-in(color, amount)

Decrease the transparency of the color, the value is between 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)

Summarize

There are so many functions that I can't remember. Only when they are used in the actual development process, of course, they can be used as much as possible. The familiarity with the functions of scss will have a more obvious improvement. Sum up, there are many used, some have been used by others, and some have not been seen. I will gradually understand what is going on. This may be the harvest of this article.

thanks

Universal network

And the hardworking self, personal blog , GitHub test , GitHub

Public Account-Guizimo, Mini Program-Xiaogui Blog