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');

Web development and Automation testing

solutions delivered!!