What are CSS Variables?
CSS Variables allow the use of, well… variables in CSS without need for pre-processors. As developers, we know that as web projects grow bigger, it becomes more difficult to maintain large and often times messy CSS. Variables also gives us the ability to reuse and easily edit repeatedly occurring CSS properties. Although that has been achievable, to an extent, with Sass, Less and other extensions, they have been pre-processors, which require compiling before use. Variables, however, can be used right away in your browser.Setting and Using CSS Variables
Like variables in Javascript, they are defined to contain specific values, which can be reused throughout a document. They are set using custom property notation (e.g.--color-black: #000;) and are accessed using the var() function (e.g. color: var(--color-black);) – simple.
Why are CSS Variables useful?
CSS Variables are potentially very useful; presenting opportunities to make our CSS more efficient as well as maintainable and in this post, I outline some of the reasons why you should explore and consider using them.1. Change dynamically
Variables are dynamic. They can change at runtime, allowing for scoping to elements and overriding as required. On changing a variable, the lowermost definition in the stylesheet overwrites the ones above it; following standard cascade rules.|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
:root { --font-heading: 24px; --font-main: 16px; } .title { font-size: var(--font-heading); } .content { font-size: var(--font-main); } .blue-container { --font-heading: 18px; --font-main: 14px; } .green-container { --font-heading: 30px; --font-main: 18px; } |
2. Easily readable property names
Variables can be saved with semantic/human readable name, which can be self-descriptive and easy to remember. For example:--color-grey is easier to understand than rgba(220, 231, 235, 1);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
:root { --color-grey: rgba(220, 231, 235, 1); --font-heading: 'Source Sans Pro', sans-serif; --size-big: 2em; --weight-bold: 700; } h1 { font-size: var(--size-big); font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--color-grey); margin: 1em auto; } |
3. Reduces repetition
Variable, once defined, can be used repeatedly. For example, for a colour that might be used in hundreds of different places, CSS variables allow the value to be stored in one place, then referenced in multiple other places. If the colour needs to be updated, the change is made in only one place, rather that searching and replacing the hundreds of different places.|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
:root { --main-bg-color: brown; /* set here */ } .one { color: white; background-color: var(--main-bg-color); /* use here... */ margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: var(--main-bg-color); /* ...and here */ margin: 10px; width: 150px; height: 70px; display: inline-block; } |
4. Follow the inheritance rule
Variables are subject to the cascade, and inherit their value from their parent. For example: for theclass="four" element, 10px is inherited from its parent
|
1 2 3 4 5 6 |
<div class="one"> <div class="two"> <div class="three"></div> <div class="four"></div> </div> </div> |
|
1 2 3 4 5 6 7 |
.two { --test: 10px; } .three { --test: 2em; } |
5. Custom property fallback values
Mutiple fallback values can be defined, which will be used when the given variable is not yet defined.|
1 2 3 4 5 6 7 8 9 10 11 |
.two { color: var(--my-var, red); /* Red if --my-var is not defined */ } .three { background-color: var(--my-var, var(--my-background, pink)); /* pink if my-var and --my-background are not defined */ } .four { background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */ } |
6. Nesting
It is possible to nest custom properties|
1 2 |
--base-color: #f93ce9; --background-gradient: linear-gradient(to top, var(--base-color), #444); |
7. Combine with calc() function
Variables can be combined with another recent addition to CSS – the calc() function.|
1 2 |
--container-width: 1000px; max-width: calc(var(--container-width) / 2); |
8. Use in JavaScript
Variable values (of custom properties) can be used in Javascript, just like standard properties; presenting great potential.|
1 2 3 4 5 6 7 8 |
// get variable from inline style element.style.getPropertyValue("--my-var"); // get variable from wherever getComputedStyle(element).getPropertyValue("--my-var"); // set variable on inline style element.style.setProperty("--my-var", jsVar + 4); |
9. Case sensitive
Variables (custom properties) are case sensitive, so--header-color and --Header-Color are different
|
1 2 3 4 |
:root { --header-color: rgba(48, 69, 92, 1); /* blackish */ --Header-Color: rgba(34, 190, 198, 1); /* bluish */ } |
10. Allow for complex calculations
Allows for complex calculations; again, presenting great potential.|
1 |
--foo: if(x > 5) this.width = 10; |