Functions

• attr() returns the value of an attribute of the selected element
• calc() allows you to perform calculations to determine CSS property values
• cubic-bezier() defines a cubic bezier curve
• hsl() defines colors using the HSL model
• hsla() defines colors using the HSLA
• linear-gradient() sets a linear gradient as the background image from top to bottom
• radial-gradient() sets a radial gradient as the background image from center to edges
• repeating-linear-gradient() repeats a linear gradient
• repeating-radial-gradient() repeats a radial gradient
• rgb() defines colors using the RGB model
• rgba() defines colors using the RGBA model
• var() inserts the value of a custom property (more details)

calc function

Lets perform calculations when specifying CSS property values. Allowed operators are +,-, *, /. Binaries + and - must be surrounded by whitespace like .demo{margin-left: calc(8px + -50%);}.

/* fit available space 
with right margin in 1em
*/
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

Gradient functions

Allows assign generated image to appropriates css properties. You must point at least two colors. First color defines initial color of gradient. Last color defines last color of gradient.

.glinear {
  background-image: linear-gradient(red, green, blue);
}

.radial-gradient {
  background-image: radial-gradient(red, green, blue);
}

.circle-gradient {
  background-image: radial-gradient(red, green, blue);
  border-radius: 50%;
}

Colors functions

Allows to assign color to appropriates css properties using color model.

/* colors with opacity, look like pastel*/
.red {
  background-color : rgba(255,0,0,0.3);
} 

.green {
  background-color : hsla(120,60%,70%,0.3);
}