Using the var() function in CSS

How the var() function can make your life easier

One of the most interesting and useful capabilities that CSS offers to developers is the ability to use variables. CSS, which began as a language for styling web pages, now provides tools that allow you to define and use variables similar to those in other programming languages. By using the var() function, you can replace variables throughout your CSS code.

CSS variables give you the ability to change a value, allowing a variable to affect multiple different elements, thus making editing and maintaining code simpler. This capability is somewhat of a revolution in the world of CSS and allows for much more effective and efficient work.

Key capabilities of var()

The var() function can be applied to any CSS property. For example, you can use it to manage colors, sizes, and even perform some calculations with this function. One of the prominent features of var() is its ability to provide fallback values for variables that have not been defined.

With these features, you can manage your design tokens across different branches and even control their presentation in a non-linear manner. This is particularly important in larger projects and teams as it significantly enhances collaboration.

Example code using var()

:root { 
  --main-bg-color: #3498db; 
  --main-text-color: #ffffff; 
}

body { 
  background-color: var(--main-bg-color); 
  color: var(--main-text-color, #000000); 
  font-family: Arial, sans-serif; 
}

Explanation of the above code

:root - This is the top level of a CSS file that applies to all styles. By using this selector, you can define your variables globally across the project.
--main-bg-color - Defines a variable for the background color and can be used in various places.
body - Here we are using the defined variable to set the background color and text color in the body element.
var(--main-text-color, #000000) - If the --main-text-color variable is not defined, the value #000000 will be used as the fallback.