CSS Variables

Mar 30, 2018

Contents

Intro

To mark the beginning of a new month, I decided to equip myself with new skills on my journey towards becoming an exceptional designer. Naïvely, I decided to conquer CSS. All of it. One. Property. Atatime. Turns out one does not simply learn all of CSS, but one can try. And so begins the journey towards CSS Mastery. First up: CSS Variables…

What are they? (CSS variables)

CSS Variables are actually a combination of two CSS features:

If you’re from the Object-Oriented Programming world, think of Custom properties as setters and the var() function as a getter. If you’re not from that world then… read on.

Custom Properties

Custom properties are just like normal CSS properties, but prefixed with two dashes and can accept any value you want.

Syntax

--property-name: value;

/* examples */

/* value can be any valid css property value */
--main-line-height: 2px;
--main-color: Red;
--default-transition: all 2s ease-in;

/* or a javascript statement */

⬆ back to top

var() Function

Used to access the value of a custom property. The var() function, as defined by CSS, can only be used to access values set by a custom property.

Syntax

property: var(--custom-property, [fallback value(s)]?);

/* examples */

color: var(--main-color);

font-style: var(--default-font, Helvetica, Arial); /* 'Helvetica, Arial' 
becomes the fallback value */

/* can also be used to set the value of another custom property */
--header-color: var(--main-color, blue); /* fall back to blue if --main-color
 is not defined */

⬆ back to top

Fallbacks

Fallbacks are only er.. fallen back to when the custom property in question is not defined. Otherwise, naturally, css variables are ignored by browsers that don’t support them.

Include a fallback property right before the the one containing a css variable.

color: red;
color: var(--main-color); /* ignored by non-supporting browsers so the color 
remains red */

How is this useful? I don’t know. But a guess is that you could use not-widely-supported css along with css variables and add fallbacks:

body {
    --main-color: rgba(10, 10, 10, 0.7);
}
p {
    color: black; /* fall back for browsers that don't support variables _and_ rgba() */
    color: var(--main-color); 
}

⬆ back to top

More notes about CSS Variables

Less magic strings == Less errors

By convention, define all your global variables in the :root selector

:root {
    --default-transition: all 0.3s ease;
    --borders: 3px solid rgba(10, 10, 10, 0.7);
}

The :root selector in HTML/CSS is like html but with a higher specificity.

Theming

css variables make theming a cinch. There are many ways to go about it, but the most straightforward is defining multiple rules for different themes:

.blue-theme {
    --primary-color: blue;
}
.red-theme {
    --primary-color: red;
}

…and switching between them using a toggle.

custom properties cascade

Which basically means that the value of a custom property set lower in the stylesheet is the one that gets applied:

:root {
    --preferred-color: red;
}

.some-element {
    --preferred-color: blue;
    background: var(--preferred-color)
    /* background will be blue */
}
…and are inherited too

Which means if we a custom property’s value on a div say <div class"some-class"></div>:

.some-class {
    --preferred-color: red;
}

Then --preferred-color will be set to red in all the descendants of some-class i.e// some-class *

⬆ back to top

Nifty example

When creating multiple rules each just slightly different from the rest:

.one {
  border: 1px solid blue;
}

.two {
  border: 1px solid red;
}

.three {
  border: 1px solid green
}

.four {
  border: 2px solid red;
}

…you can instead do:

div {
  --div-border-width: 1px;
  --div-border-style: solid;
  --div-border-color: red;  
}

div.one {
  --div-border-color: blue;
}

div.three {
  --div-border-color: green;
}

div.four {
  --div-border-width: 2px;
}

⬆ back to top

Fin