Variables and functions

Functions

• calc - used to perform mathematical operations
• min - used to get the minimum of given values
• max - used to get the maximum of given values
• clamp - clamp function is used to select ideal value between 2 other values
• var - used to create css variables
• attr - returns the value of attribute of selected element
• rbg - defines color using red, green, blue model
• hsl - defines color using Hue, Saturation, Lightness

Variables

Variables can have local or global scope. To create variables with global scope, you need to use :root selector.

:root {
    --primaryColor: blue;
}

body { color: var(--primaryColor); }

You can also create/access these variables from JavaScript.

getComputedStyle(document.documentElement).getPropertyValue('--primaryColor'); 
document.body.style.setProperty('--primaryColor', 'black');