CSS Variables: Creating and Retrieving Stylesheet Values

If you’ve ever taken a programming class or done a tutorial, you are likely familiar with the idea of variables.

Variables – a named storage location used to store some value or data that can be accessed or modified during the execution of the program – are one of the most basic and essential concepts of programming.

In web development, variables exist for CSS, where a value can be stored and accessed throughout your stylesheet.

Here’s what you need to know about creating and using CSS variables.

How Can I Create a CSS Variable?

CSS variables can be created with either a global scope – where it can be used anywhere in your stylesheet – or a local scope, where it can be used only within a certain selector.

In order to define a global scope CSS variable, the :root pseudo class is used. For example:

:root {
     --dgtlnk-primary-color: #000000;
     --dgtlnk-secondary-color: red;
}

Local scope CSS variables are declared in a similar way within the element and can be accessed within the defined element only.

section {
     --dgtlnk-section-color: #000000;
     --dgtlnk-section-padding: 40px;
}

You can see that CSS variables are declared using a prefix of two dashes (–) followed by the variable name and a valid CSS value.

It’s good practice to prefix the variable name with something unique so that you don’t end up overwriting a previously declared CSS variable created by another program or plugin running on the site.

How Do I Retrieve the Value of a CSS Variable?

The CSS var() function is used to retrieve the value of a CSS variable in the stylesheet. For example:

body {
     color: var(--dgtlnk-primary-color);
}

body h2 {
     color: var(--dgtlnk-secondary-color);
}

section div {
     color: var(--dgtlnk-section-color);
     padding: var(--dgtlnk-section-padding);
}

CSS variables are helpful for defining properties that are repeated throughout the stylesheet like for colors, paddings, margins, etc. Adding CSS properties like colors in a global scope variable and using it within the stylesheet makes it easier to maintain and update the stylesheet as the change only needs to be made in one place instead of finding every instance in the stylesheet and updating it.

What are Some Examples of CSS Variables?

One of the best examples of CSS variables is in the latest version of Bootstrap – now one of the most popular frameworks for developing responsive mobile-friendly websites.

CSS variables were introduced in Bootstrap 4 for commonly used values like theme colors, breakpoints and primary fonts. The official move towards using CSS variables as a core feature was made in Bootstrap 5.0. With the release of Bootstrap 5.1, 5.2 and 5.3, the CSS variables library is massively expanded allowing for easier customizations.

Since Bootstrap is extensively used for CSS grid layouts, having CSS variables makes it a lot easier to update the gutter width between columns for individual sections using the –bs-gutter-x variable. All Bootstrap variable names are prefixed with the letters bs.

Using CSS Variables for a Sticky Fixed Header

CSS variables can be incredibly helpful when you have a fixed header on your website and you want to update the top offset for any position: sticky; elements, like a sticky navigation. Using JavaScript to calculate the height of the header and setting the CSS variable on the body element makes it easier to reference the top offset for the sticky element.

<script type="text-javascript">
jQuery(function($) {
     let headerHeight = $('.fixed-header').outerHeight(true);
     $('body').css('--dgtlnk-header-height', headerHeight + 'px');
});
</script>
<style>
.sticky-element {
     position: sticky;
     top: var(--dgtlnk-header-height);  
</style>

In the above code, we use JavaScript to calculate the height of the fixed header and define a CSS variable named –dgtlnk-header-height on the document body element. In the stylesheet, we reference the CSS variable to define the top offset for the sticky element. This ensures that the sticky element does not get overlapped by the fixed header and is always visible under the header.

This is just one example of smartly using CSS variables. In the past, we’ve talked about using variables to store values like the width of a curved underline. The CSS variable is a very powerful tool and can be used to make development, maintenance and updates easier.

If you’d like to learn more, visit our blog or reach out to us.