SASS - Functions - Code World

This article describes Sass function. Sass contains a large number of functions, this article describes the most important and most frequently used functions, the other can refer to the official documentation.

Color function

sass contains many color operation function. For example: lighten()the darken()functions can be used to lighten or darken the color, opacify()the function to reduce the color of the transparency, transparent()the function to increase transparency so that the color, mix()the function can be used to mix the two colors.

The following are mix()Examples of functions:

div {
    padding: 20px;
    margin: 20px;
}
.one {
    background: red;
    }
.two {
    background: yellow;
}
.three {
    background: mix(red, yellow);
    }
.four {
    background: mix(red, yellow, 35%);
}
.five {
    background: mix(red, yellow, 65%);
}

CSS code compiled the following output:

div {
  padding: 20px;
  margin: 20px; }

.one {
  background: red; }

.two {
  background: yellow; }

.three {
  background: #ff8000; }

.four {
  background: #ffa600; }

.five {
  background: #ff5900; }

Syntax is mix($color1， $color2， [$weight])optional $weightparameter $ Color1 weights If omitted, the weight is 50%.

String Functions

Many Sass string handling functions, such as adding to the quoted string quote(), the string length acquisition string-length()of the content into a string and a given position string-insert().

Numeric Functions

Function processing numerical value, for example: percentage()the value without conversion unit as a percentage, round()the number is rounded to the nearest integer, min()and max()acquires the minimum or maximum of a few numbers, random()returns a random number.

List function

Operation List List function, length()returns the length of the list, nth()returns a specific item in the list, join()the list of two connected, append()add a value at the end of the list.

Map function

Map Map function operation, map-get()the key acquired according to the corresponding value in the map, map-merge()to map the two merged into a new map, map-values()all the values in a map.

Function selector

Selectors related functions, such as: selector-append()can be attached to a selector to select another character.

Self-test function

Self-related functions, such as: feature-exists()check the current version Sass whether there is a feature, variable-exists()check the current scope if there is a variable, mixin-exists()check whether there is a mixin.

For a complete list of functions Sass

There are many other functions, please refer to Sass documentation .

SASS - Functions