CSS Variables

CSS variables, also known as "custom properties", allow you to store values you can reuse throughout your CSS.

This feature can make your stylesheets easier to manage and maintain by reducing repetition and simplifying applying consistent styles across multiple elements.

How to Create CSS Variables

CSS variables are defined using the -- prefix followed by the variable name. They are typically declared within a :root selector to make them globally available, but they can also be scoped to specific elements.

:root {
  --variable-name: value;
}

And a more actual example:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
  --spacing: 10px;
}

Using CSS Variables

You use the var() function to use a CSS variable. This function takes the variable's name as an argument and can optionally take a fallback value.

.element {
  property: var(--variable-name);
}

And again, with an actual example:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
  --spacing: 10px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing);
  font-size: var(--font-size);
}

.button-secondary {
  background-color: var(--secondary-color);
  color: white;
  padding: var(--spacing);
  font-size: var(--font-size);
}

Overriding CSS Variables

CSS variables can be overridden within a specific scope, such as within a specific class or element. This allows you to create flexible and dynamic styles.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
  --spacing: 10px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing);
  font-size: var(--font-size);
}

.button-secondary {
  background-color: var(--secondary-color);
}

.container {
  --primary-color: #e74c3c; /* Overriding primary color within .container */
}

.container .button {
  background-color: var(--primary-color);
}

Fallback Values

The var() function can take a fallback value, which will be used if the variable is not defined. This can be useful for providing default values.

:root {
  --primary-color: #3498db;
}

.button {
  background-color: var(--primary-color, #333); /* Fallback to #333 if --primary-color is not defined */
  color: white;
  padding: var(--spacing, 10px); /* Fallback to 10px if --spacing is not defined */
}

Example Time

Here's a CodePen showcasing how you can scope changes and change variable values depending on conditions. We have the theme changing depending on a class that we append, and the fonts update depending on the screen size by updating the variables in a media query:

I hope this introduction shows how CSS variables help manage and reuse values in your stylesheets. Using variables allows you to create more maintainable and flexible CSS, making implementing consistent design systems and responsive layouts easier.

Experiment with CSS variables to see how they can streamline your CSS and enhance your web design workflow.