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%);}

code result
/* 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.

code result
.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.

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

.green {
  background-color : hsla(120,60%,70%,0.3);
} 
functionexplanation
rgb(r,g,b) defines colors using the RGB model
  • r - red component, value from 0 to 255
  • g - green component, value from 0 to 255
  • b - blue component, value from 0 to 255
rgba(r,g,b,a) defines colors using the RGBA model
  • r - red component, value from 0 to 255
  • g - green component, value from 0 to 255
  • b - blue component, value from 0 to 255
  • a - alpha component, value from 0.0 (fully transparent) to 1.0 (fully opaque)
hsl(h,s,l) defines colors using the HSL model
  • h - hue, a degree on the color wheel (from 0 to 360), where 0 (or 360) is red, 120 is green, 240 is blue
  • s - saturation, 0% is a shade of gray and 100% is the full color
  • l - lightness, 0% is black, 50% is normal, and 100% is white
hsl(h,s,l) defines colors using the HSLA model
  • h - hue, a degree on the color wheel (from 0 to 360), where 0 (or 360) is red, 120 is green, 240 is blue
  • s - saturation, 0% is a shade of gray and 100% is the full color
  • l - lightness, 0% is black, 50% is normal, and 100% is white
  • a - alpha component, value from 0.0 (fully transparent) to 1.0 (fully opaque)