Sass Basic Functions

Common functions in Sass

One, the string function

1. unquote ($string): Delete the quotation marks before and after the string, delete the pair of quotes, and return the original string if the string is not enclosed in quotation marks.

Example:

{    content: unquote ("' Hello '");}

　　2. QUOTE ($string): To add quotation marks to a string, and a single quotation mark or a space in the middle of the string, you need to enclose it in single or double quotation marks, otherwise the compilation will be an error (the solution is to remove the space, or add quotation marks). At the same time quote () encountered special symbols, such as:!、?、 >, in addition to the fold-and underline _ are required to use double quotation marks, or the compiler will be compiled when the same error.

Example:

{    content: quote (Hello-word);}

　　3. Case conversion

To-upper-case ($string);//Turn capital
To-lower-case ($string);//Turn lowercase

Example:

{    text: to-upper-case (AAaA);     text: to-lower-case (AAaA);}

Second, the number function

1. Percentage ($value): Converts a number without units to a percentage value;
2. Round ($value): Rounding the values, converting them to a nearest integer, which can be taken with units;
3. Ceil ($value): Rounded up to an integer, can be taken with units;
4. Floor ($value): To remove a number of his small number of parts, can be carried units;
5. ABS ($value): Returns the absolute value of a number, which can be taken with units;
6. Min (s ...) : Find the minimum value between several values, can take the same type unit;
7. Max (s ...) : Find the maximum value between several values, can take the same type unit;
8. Random (): Get the stochastic number

Example:

1 . Header{2 width:percentage (. 2);//20%3 Height:percentage (2px/3px);//66.66667%4 5 margin:round (3.2px);//3px6 7 padding:ceil (2.1px);//3px8 9 Border-width:Floor (3.9PX);//3pxTen  One font-size:ABS ( -10px);//10px A  - Top:min (5px, 10px, 20px, 2px);//2px -  Left:Max (5px, 10px, 20px, 2px);//20px the  - Border-radius:Floor (random () *10px);//This value really does not know how to say -}

Third, List function

1. Length ($list): Returns the length value of a list, separated by a space between the list parameters in the function, cannot use commas, or the function will be faulted;
2. Nth ($list, $n): Returns a label value specified in a list, starting at 1, $n must be greater than 0, or error (syntaxerror:list index 0 must be a non-zero integer for ' nth ')
3. Join ($list 1, $list 2, [$separator]): Concatenate two columns into a list;
4. Append ($list 1, $val, [$separator]): Place a value at the end of the list;
5. zip ($lists ...) : Combine several lists into a multi-dimensional list;
6. Index ($list, $value): Returns the position value of a value in the list.

Example:

{    font-size: Length ($list); //5    line-height: nth ($list, 3);     margin: index ($list, 5px);}

Output:

1{2  font-size: 5;  3  line-height: 3px;  4  margin: 5;}

Join () can only connect two lists to a list, if the direct connection to more than two lists will be error (SyntaxError: $separator: (#ddeeee #eeffff) is not a string for ' join ')
Optional Parameters $separator; Defines the delimiter for the list element, the default auto recognition, comma use, split; space is separated by spaces;

Example:

1 H2{2 content:Join ($list, (6px,7px,8px), space);//return new string3}4 H3{5 content:Append ($list, 9px);6}7 h4{8 The value of each single list in the//zip () function takes its same position value:9 content:Zip ((1px 2px 3px), (solid dashed dotted), (green Blue red));Ten}

Output:

1{2  content: 1px 2px 3px 4px 5px 6px 7px 8px;} 3 4  {5  content: 1px, 2px, 3px, 4px, 5px, 9px;} 6 7  {8  content: 1px solid green, 2px dashed blue, 3px dotted red;}

The introspection function contains several types of judgement functions

1. type-of ($value): Returns the type of a value
return value:
Number is a numeric type.
string literal.
BOOL is a Boolean type.
Color is a colored type.
2. Unit (): Returns the unit of a value;
3. Unitless (): Determines whether a value has a unit, without returning true, with units returning false
4. Comparable (-1,-2): Determine whether two values can be added, reduced, and merged; can return true, can not back false

Example:

H1 {    content: type-of (true); //bool}

Five, miscellaneous function

　　The ternary conditional function , which has two values, returns a value when the condition is established, returns another value when the condition is not true: if ($condition, $if-true, $if-false)

Example:

{    padding: if (true,2px,3px);}

Output:

{  padding: 2px;}

VI. type of Map

The map in sass is often referred to as a data map, and some people call it an array, as he always appears in pairs of key:value, more like a JSON data

Example:

$color: (    default: #fff,    Primary: #22ae39,    negative: #d9534f    );

function function of map. Map with seven functions in sass
1. Map-get ($map, $key): Returns the relevant value in the map based on the key value
2. Map-merge ($map 1, $map 2): Merging two maps into a new map
3. Map-remove ($map, $key): Removes a key from the map and returns a new map
4. Map-keys ($MAP): Returns all keys in the map
5. Map-values ($MAP): Returns all the value in the map
6. Map-has-key ($map, $key): To determine if a map has a corresponding value value based on the given key value, or False if it returns true
7. Keywords ($args): Returns the parameter of a function that can be dynamically set key and value

Map-get ($map, $key) Example:

1 $social-colors: (2 Dribble: #ea4c89,3 Facebook: #3b5998,4 GitHub: #171515,5 Google: #db4437,6 Twitter: #55acee7     );8 . Btn-dribble{9 Color:Map-get ($social-colors, Facebook);Ten //If $key is not in the $map, CSS will not be compiled, in fact Map-get returns a null value.  One Background-color:Map-get ($social-colors, Weibo); A}

/* * Map-get ($map, $key) Example */  {  color: #3b5998;}

Map-has-key ($map, $key) Example:

1 /*define a function to determine whether the $key is in the $map or otherwise error*/2 @function Colors ($color){3 @if not Map-has-key ($social-colors, $color) {4 @warn "No color found for #{$color}In $social-colors map. Property omitted. ";5     }6 @return Map-get ($social-colors, $color);7 }8 9 . Btn-dribble{Ten Color:colors (dribble); One} A . Btn-facebook{ - Color:colors (facebooks); -}

Output:

{  color: #ea4c89;}

Sass Basic Functions