All websites and web applications rely on stylesheets to display the user experience. Complex websites or applications have very large amounts of CSS, often with a lot of repeated values. The same color or font family might be used in hundreds of different places, requiring global search and replace if that color or font needs to change. Custom properties allow a value to be stored with a common name to be referenced in multiple other places throughout the stylesheet.

Root Variables or Custom Properties

Optimizing your CSS starts with the basics and includes defining your global variables or custom properties as they are traditionally known. Declaring a custom property or variable is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid CSS value written within a ruleset. Typically we declare these variables within the :root element for the entire website or application and call on it elsewhere in a var() function.

:root {
--black: #111111;
--company-blue: #004561;
--company-grey: #adadad;
--serif-font: 'Times New Roman', serif;
--sans-serif-font: Arial, 'Helvetica', sans-serif;
}
 
p {
font-family: var(--serif-font);
color: var(--black);
}

The color and font have been set in the styles using root custom properties.

Sass Global Variables

A Sass or SCSS variable declaration looks a lot like a property declaration. They are simple. A value is assigned to a name that begins with $, one can refer to that name instead of the value itself. But despite their simplicity, they’re one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.

// Variables
$black: #111111;
$company-blue: #004561;
$company-grey: #adadad;
$serif-font: 'Times New Roman', serif;
$sans-serif-font: Arial, 'Helvetica', sans-serif;
 
// Start Styles
p {
font-family: $sans-serif-font;
color: $company-blue;
}

The color and font have been set in the styles using SCSS custom variables.

Overriding Root or SCSS Variables

Sometimes it may be necessary to override a :root variable. In cases where Google Chrome or other browsers have set standard CSS rules for unanswered style or complex form elements. When these custom properties are discovered, one can simply redefine the variable at the beginning of the stylesheet, or even only where it is needed in special case scenarios. Below are examples of overriding the styles after the custom properties have been set in CSS as well as after importing styles in SCSS.

// CSS Variable Override
--company-blue: #004561;
 
// Assign new value within the element before calling on it
p {
--company-blue: #0000ff;
color: var(--company-blue);
}
// SCSS Variable Override
@import 'main-styles.scss';
 
// Assign new value to the existing variable after importing or below original value
$company-blue: #0000ff;
 
p {
color: $company-blue;
}

Declaring and rewriting these variables saves loads on exporting a minified CSS file for website and application contentful paints as well as keeping the brand design organized and easy to update globally in a single edit.