Image for post
Image for post

CSS Variables — No, really!

Dave Gash
Dave Gash
Apr 19, 2017 · 20 min read

Introduction

Image for post
Image for post
Eek, that’s a lot of red
Image for post
Image for post
Ahh, much better

Variables Refresher

But Are They Variables or Properties?

The Problem

body { margin: 50px; padding: 20px; border: 5px solid darkcyan;
font-family: tahoma, verdana; text-align: center; }
.legend { color: darkcyan; font-weight: bold; }
a { outline: none; color: Darkcyan; text-decoration: none; }
fieldset { border: 1px solid darkcyan; height: 300px; }

Syntax

So… that’s it?

:root {
--bgcolour: #ffffd0;
--bqindents: 40px;
--warningtextsize: 125%;
}
table {
background-color: var(--bgcolour);
}
blockquote {
margin-left: var(--bqindents);
margin-right: var(--bqindents);
}
p.warning {
color: red;
background-color: var(--bgcolour);
font-size: var(--warningtextsize);
}

PAQs

:root { --my-value: 20; }
. . .
blockquote { margin-left: var(--my-value)px; }
:root { --my-property: font-size; }
. . .
p { var(--my-property): 24px; }
:root { --mybasecolor: red; }
. . .
p.wow { --myparacolor: var(--mybasecolor); }

What’s the Deal with Colors?

Image for post
Image for post
:root { --hilitecolor: #ffffe0; } /* pastel yellow */
. . .
tbody tr:nth-child(odd) {
background-color: var(--hilitecolor); }
span.hilite { background-color: var(--hilitecolor); }
blockquote { font-family: times; font-weight: bold;
font-size: 90%; margin-left: 75px; margin-right: 75px;
background-color: var(--hilitecolor); padding: 10px;
border: 1px solid black; border-radius: 15px; }
input:focus { background-color: var(--hilitecolor); }
Image for post
Image for post
:root { --zebraevencolor: lightgreen;
--zebraoddcolor: lightblue; }
. . .
tbody tr:nth-child(even) {
background-color: var(--zebraevencolor); }
tbody tr:nth-child(odd) {
background-color: var(--zebraoddcolor); }
Image for post
Image for post
:root { --linkfg: #000080; 
--linkbg: #ffffff; }
. . .
a:link {color:var(--linkfg); background-color:var(--linkbg);}
a:visited {color:var(--linkfg); background-color:var(--linkbg);}
a:hover {color:var(--linkbg); background-color:var(--linkfg);}
a:active {color:var(--linkbg); background-color:var(--linkfg);}
Image for post
Image for post
:root { --stdshadow: 3px 3px 5px #A0A0A0; }
. . .
h1 { text-shadow: var(--stdshadow); }
p.shadow { text-shadow: var(--stdshadow); }
img.boxed { box-shadow: var(--stdshadow); }
/* Variable set 1 — test theme (currently in use) */:root {
--transition-type: padding-left 250ms ease-out;
--transition-padding: 20px;
--transition-font-size: 100%;
--navbar-bgcolor: lightgray;
--navbar-h2-color: brown;
--navbar-h2-border: thin brown solid;
--navbar-font-size: 12px;
--font-stack: Cambria, Georgia, "Times New Roman", serif;
--font-size: 16px;
--font-color: darkblue;
--max-width: 1000px;
--header-fontvariant: normal;
--header-color: white;
--header-bg: teal;
--header-shadow: 2px 3px 4px red;
--header-curve: 20px;
--header-border: thin darkblue solid;
--teaser-color: yellow;
--byline-color: white;
--h3-color: teal;
--h3-fontvariant: small-caps;
--dropcap-size: 200%;
--dropcap-font: Times;
--pullquote-border: thick black solid;
--pullquote-start: url(quotestart.png);
--pullquote-end: url(quoteend.png);
--zebraoddcolor: white;
--zebraevencolor: lightyellow;
--linkfg: darkblue;
--linkbg: white;
}
/* Variable set 2 -- fallback theme (currently commented out):root {
--transition-type: font-size 250ms ease-out;
--transition-padding: 0px;
--transition-font-size: 200%;
--navbar-bgcolor: lightblue;
--navbar-h2-color: darkgreen;
--navbar-h2-border: thin darkgreen dashed;
--navbar-font-size: 14px;
--font-stack: Verdana, Arial, sans;
--font-size: 18px;
--font-color: darkgreen;
--max-width: 1500px;
--header-fontvariant: small-caps;
--header-color: black;
--header-bg: lightyellow;
--header-shadow: 2px 3px 4px orange;
--header-curve: 100px;
--header-border: thick red solid;
--teaser-color: red;
--byline-color: orange;
--h3-color: darkred;
--h3-fontvariant: normal;
--dropcap-size: 400%;
--dropcap-font: Courier;
--pullquote-border: thick #ff6a00 dotted;
--pullquote-start: url(orangequotestart.png);
--pullquote-end: url(orangequoteend.png);
--zebraoddcolor: yellow;
--zebraevencolor: lightgray;
--linkfg: red;
--linkbg: white;
}
*/

Just One More Thing

:root { --custom-width: 80%;
--myTextColour: darkblue; }
. . .
div.special { width: var(--custom-width, 80%);
color: var(--mytextcolour, red); }

Advanced Stuff

<section class="thisweek">
<article>
. . .
</article>
<article>
. . .
</article>
<article>
. . .
</article>
</section>
<section class="lastweek">
<article>
. . .
</article>
<article>
. . .
</article>
<article>
. . .
</article>
</section>
<section class="oldstuff">
<article>
. . .
</article>
<article>
. . .
</article>
<article>
. . .
</article>
</section>
section.thisweek {
--h1-color: red;
--h1-size: 110%;
}
section.lastweek {
--h1-color: green;
--h1-size: 100%;
}
section.oldstuff {
--h1-color: blue;
--h1-size: 90%;
}
article h1 {
color: var(--h1-color);
font-size: var(--h1-size);
}
:root {
--bq-resize-by: 1.5;
--warning-resize-by: 2.0;
}
. . .
blockquote {
font-size: calc(var(--bq-resize-by) * 1em);
}
.warning {
font-size: calc(var(--warning-resize-by) * 1em);
}
var allstyles = getComputedStyle(document.documentElement);
var varval = string(allstyles.getPropertyValue("--my-bg-colour"));
var varval = varval.trim();
document.documentElement.style.setProperty("--my-bg-colour", "#008080");
document.documentElement.style.setProperty("--my-bg-colour", "var(--my-fg-colour)");

Takeaways

Resources

Thanks!

Dev Channel

Developers Channel - the thoughts, opinions and musings…

Dave Gash

Written by

Dave Gash

Dave is a technical publications specialist, a Technical Writer at Google, and a frequent speaker at User Assistance conferences in the US and around the world.

Dev Channel

Developers Channel - the thoughts, opinions and musings from members of the Chrome team.

Dave Gash

Written by

Dave Gash

Dave is a technical publications specialist, a Technical Writer at Google, and a frequent speaker at User Assistance conferences in the US and around the world.

Dev Channel

Developers Channel - the thoughts, opinions and musings from members of the Chrome team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store