Crafty Spell-book of Styles: CSS Variables

Transform your style sheet with the magic of CSS variables

As a wizard of the web, I often find myself in need of certain values that I want to use throughout my style sheet, such as the colors of my wizard robes or the font size of my spells. That’s where CSS variables come in handy.

CSS variables, also known as CSS custom properties, are values that I can store in my style sheet and then reuse throughout the document. To define a CSS variable, I simply prefix it with -- and set it using the var() function. For example, I might define a variable for the color of my wizard robes as follows:

:root {
  --wizard-robe-color: #333;
}

Then, whenever I want to use this value in my styles, I can call it using the var() function like so:

.wizard-robe {
  color: var(--wizard-robe-color);
}

I can even define variables within other selectors and override them with more specific selectors. For example:

:root {
  --wizard-robe-color: #333;
}

.wizard-spell {
  --spell-color: var(--wizard-robe-color);
  color: var(--spell-color);
}

.wizard-spell--dark {
  --spell-color: #999;
}

This way, I can create flexible and reusable styles that I can easily modify as needed. The power of CSS variables truly makes me feel like a wizard of the web!

Contact me here: LinkedIn | Codepen | Email