Grammar usage of sass in sass series (3)

The previous article introduced some looping statements about sass syntax, etc. This article will introduce the built-in functions of sass, and will be the last article of the sass series, which aims to write CSS using sass syntax.

1. Introduction of built-in function api

Built-in functions:

1. String functions
  unquote($string): remove quotes from a string;
  quote($string): Add quotes to the string.
  To-lower-case($string)
  To-upper-case($string)

2. Numeric functions
      percentage($value): Convert a number without units to a percentage value;
      round($value): rounds the value to the nearest integer;
      ceil($value): Convert a decimal greater than yourself to the next integer;
      floor($value): remove the fractional part of a number;
      abs($value): Returns the absolute value of a number;
      min($numbers...): Find the minimum value between several values;
      max($numbers...): Find the maximum value between several values;
      random(): get random number

3. List functions
      length($list): Returns the length of a list;
      nth($list, $n): Returns a label value specified in a list
      join($list1, $list2, [$separator]): joins two columns together to make a list;
      append($list1, $val, [$separator]): put a value at the end of the list;
      zip($lists...): combine several lists into a multidimensional list;
      index($list, $value): Returns the position value of a value in the list.

4.Introspection function
 type-of($value): returns the type of a value
 unit($number): Returns the unit of a value
 unitless($number): Determine whether a value has a unit
 comparable($number-1, $number-2): Determine whether two values ​​can be added, subtracted and combined

5. Miscellaneous function: The Miscellaneous function is called a ternary conditional function, mainly because it is very similar to the ternary judgment in JavaScript.
                     It has two values, one value is returned when the condition is true, and another value is returned when the condition is not true
  模板：if($condition,$if-true,$if-false)
  column: if(true,1px,2px) result: 1px

6. Functions of Maps
map-get($map,$key): According to the given key value, return the relevant value in the map.
map-merge($map1,$map2): Merge two maps into a new map.
map-remove($map,$key): Remove a key from the map and return a new map.
map-keys($map): Returns all the keys in the map.
map-values($map): Returns all the values ​​in the map.
map-has-key($map,$key): According to the given key value, determine whether the map has a corresponding value value, if so, return true, otherwise return false.
keywords($args): Returns the parameters of a function, which can dynamically set the key and value.

2. Use demo of Map function (theme color switching actual combat)

It's still the old way, look at the compiled css file, I believe everyone understands it

.box {
  width: 200px;
  height: 200px;
  background-color: #ff311f;
  color: #444; }

好了，至于其它的一些内置函数的使用我就不一一列举了，太简单了，只要明白那些内置函数所实现的功能，之后就比较傻瓜式的套用就可以了。那么有关于sass的使用，就到此为止了，有关写的不好的地方，可以评论建议，谢谢。