CSS variables for work and play

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🐈‍⬛ 🧗 🏳️‍🌈

@hj_chen

Okay, now back to the main topic of CSS custom properties. Unfortunately this is a fully online conference so it's a little harder to have real-time audience interaction. But at this point, I'd love to see how many of you have ever read any of the CSS specifications. I'm sure there will be some of you who have, but also many who have not.

I personally love the CSS specifications, even those that were written in the very early days and were not phrased in a way the average human being could understand. To me, knowing what the CSS was intended for and how it was designed to be used makes it easier for me to actually use it in my own projects.

The relevant CSS specification for today is the CSS Custom Properties for Cascading Variables Module Level 1. And it had been in the works for a long time, with the first public working draft published back in 2012. The original specification name was CSS Variables Module Level 1, so I guess that name still stuck.

                $base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

                @link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);

.link {
  color: @link-color;
}
.link:hover {
  color: @link-color-hover;
}

                font-size = 14px
font-stack = "Lucida Grande", Arial, sans-serif

body
  font font-size font-stack

Sass variables

Source SCSS

$accent-colour: cornflowerblue;
.card {
  border: 2px dashed $accent-colour;
}

$accent-colour: palegreen;
.cta {
  box-shadow: 0 5px 15px 5px $accent-colour;
}

Compiled CSS

.card {
  border: 2px dashed cornflowerblue;
}

.cta {
  box-shadow: 0 5px 15px 5px palegreen;
}

Custom properties syntax

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --dinosaur.

--*

It will be used to define the substitution value of var() functions.

So how to name your variables?

Acceptable 🙆🏻‍♀️

:root {
  --dinosaur: firebrick;
  --42: orange;
  --waterMelon: lightcoral;
  --watermelon: gold;
  ----c4tz: forestgreen;
  --_pirate: gold;
}

Sorry, but no 🙅🏻‍♀️

--angels: pink; // not in a selector

:root {
  fruit: tomato; // no dash, doesn't work
  -flower: orchid; // single dash, also cannot
  // special characters are generally a no
  --$cargopants: olive;
  --@weather: skyblue;
  --bread&butter: lemonchiffon;
}

The `var()` notation

var( <custom-property-name> , <declaration-value>? )

where <custom-property-name> is the double-dash prefixed property, and declaration-value is the optional fall-back

Using these defined values in your CSS requires the var() function. It takes 2 arguments, your custom property, and an optional fall-back. Most of the time, I almost never see people using the fall-back. Unsure if people don't know it exists, or that they're not sure how it works.

The `var()` notation

The fallback value kicks in if the custom property value is undefined

Hello, I am a box! :)

The point of the fallback value is that, if the custom property name used in the first argument is not defined, then the fallback value will be used instead. Not defined, in this case, should be familiar to most of us who do front-end. It's when the browser cannot match the variable to any value. So if I spelled --dinosaur wrong, it would trigger the fallback, but if I typo-ed on the value itself, fallback does not kick in.

Inheriting CSS variable values

Hello, I am a p element with a class of a-sentence in a div with the class a-box.

Hello, I'm just a box, with the class b-box.

The selector I'm using up top is the :root selector. If you look at most tutorials and blog posts about CSS custom properties, you will see this selector used very often. Because it represents the root element, defining your variables in this scope essentially makes your CSS custom properties global.

CSS variables also has cascade and inheritance built in. Personally, I had to experiment around quite a bit before I fully understood things, but this is what I realised about inheriting these variable values.

Depending on where you declare your variables, you can scope them to specific selectors. You can then modify their values within descendants, however, for them to take effect, these values have to be used in properties on the selector you're trying to target.

In this example, I have some elements set up already. The primary background variable is set on the root, while the primary text variable is set on the <div>s. Both these variable values have been used on properties for the <div>s, i.e. the background-color and color.

When I modify --primary-bg on the .a-box class selector, the element itself already has the background-color property using that variable value, so I can just change the variable value to another colour and see it take effect.

On the p element, however, the --primary-txt value is only used on the border property. So if I set the --primary-txt value to something else, only the border changes colour but the text colour remains the one set on its parent div.

Debugging with Devtools

Chrome Devtools for CSS custom properties — Chrome

Firefox Devtools for CSS custom properties — Firefox

Safari Devtools for CSS custom properties — Safari

The dark/light mode toggle

Light mode?

森秋彩　努力の天才

多くの人が待ち望んだシニア国際大会デビュー。世界選手権では得意のリードで日本人最年少メダルを獲得。幼い頃から数々の大会を制してきた16歳は、どのような心境で2019年シーズンを過ごしてきたのか。まだ幼さの残る表情から見えてきたのは、絶え間ない向上心。クライミングの天才少女は、努力の天才だった。

Sprinkle on Javascript

Data attributes are useful for theming, localStorage can be used for persistence

See the Pen Untitled by Chen Hui Jing (@huijing) on CodePen.

Basic theming example

Hello, this is a frame without any themes applied.

Hello, this is a frame with the class theme-1.

Hello, this is a frame with the class theme-2.

For this next example, we'll make things a little bit fancier by going with a frame outline style with rounded borders, which actually isn't that straightforward to implement. It's this odd combination of wanting a gradient border combined with rounded corners. But hey, it's still possible.

Ignoring the fanciness of things, this example here makes use of the inheritance of CSS variables and modifies the value of the --frame-outline on different theme classes. In this example here, you can see that there are 4 custom properties defined. And there's nothing stopping you from using a variable in another variable.

Like these 2 gradient values here, can be used to modify the frame-outline variable for a different CSS class. CSS variables can hold the full value of a CSS property, or just a single value within a multiple value property, like border or background.

Maintainable variant styling

radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

Solar

Moonbyul

Wheein

Hwasa

Combine with `calc()`

CSS variables in media queries

See the Pen Untitled by Chen Hui Jing (@huijing) on CodePen.

Sass is still relevant

@mixin defineColorHSL($color, $hue, $saturation, $lightness){
  #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};
}

:root, [data-theme="default"] {
  @include defineColorHSL(--color-primary, 220, 89%, 56%);
  @include defineColorHSL(--color-accent, 355, 90%, 61%);
  @include defineColorHSL(--color-black, 240, 8%, 12%);
  @include defineColorHSL(--color-white, 0, 0%, 100%);
}

.component {
  background-color: alpha(var(--color-primary), 0.2); // it works 🎉
}

@function lightness($color, $lightnessMultiplier){
  $color: str-replace($color, 'var(');
  $color: str-replace($color, ')');
  $color-h: var(#{$color+'-h'});
  $color-s: var(#{$color+'-s'});
  $color-l: var(#{$color+'-l'});
  @return hsl($color-h, $color-s, calc(#{$color-l} * #{$lightnessMultiplier}));
}

.component {
  background-color: lightness(var(--color-primary), 1.2);
}

How to combine SASS color functions and CSS Variables

All that being said, this does not mean Sass is completely obsolete. At least for now, it is still a rather useful tool. Functions and mixins are still great ways to make your code neater, and those don't ever get compiled into actual CSS. If you have a design system with multiple sets of theme colours, you might end up with a lot of colour variables, and having all of them in the output CSS might not be the best idea. Sass variables don't show up in the final output, so this is something to keep in mind.

This is an example from a rather specific problem the author was trying to solve for generating colour variations. And it makes use of Sass colour functions to alpha values and expand on other colour modification functions for lightness and saturation.

If you do want to mix up Sass variables and CSS variables, do remember that you will have to wrap the Sass variable within #{} so that it gets parsed correctly at compile time.

Easier Javascript hooks

// get variable value from element
getComputedStyle(element).getPropertyValue('--variable-name')

// set variable value
element.style.setProperty('--variable-name', 'RELEVANT_PROPERTY_VALUE');

See the Pen Untitled by Chen Hui Jing (@huijing) on CodePen.

Easier Javascript hooks

// get variable value from element
getComputedStyle(element).getPropertyValue('--variable-name')

// set variable value
element.style.setProperty('--variable-name', 'RELEVANT_PROPERTY_VALUE');

See the Pen Naive colour change on mousemove by Chen Hui Jing (@huijing) on CodePen.

And like I mentioned earlier in the talk, any interaction that can be translated into a mathematical relationship with an element's style property can be leveraged to do some interesting things. You generate colours based off mouse position, if that's something you wanted.

The key difference between modifying styles with Javascript directly versus modifying the value of a CSS variable is the specificity advantage. Inline styles have a notoriously high specificity, which makes things trickier to manage and styles are coming from numerous sources. You may end up in unwanted specificity battles and debugging complications.

Using CSS variables allows you to keep the styles within CSS and reduce to number of overriding styles on the same element, as demonstrated in some of the previous examples we went through earlier.

The `@property` at-rule

The @property rule represents a custom property registration directly in a stylesheet without having to run any JS.

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

If you want to look further into future possibilities, you can keep in mind the @property at-rule, which is part of the CSS Properties and Values API Level 1, AKA CSS Houdini. This particular CSS module defines an API for registering new CSS properties, which get a parse syntax defining its type, inheritance behaviour, and its initial value. Even though support is pretty much limited to Chromium-based browsers, it's still good to know how it works.

Animate gradients with custom properties

One thing that you could not do in the past was to animate gradients which were set as background images. The background-image property is not an animatable property. The browser can only animate something if it knows how to interpolate between the start and end values. The @property has a syntax descriptor that allows you to tell the browser the type of property you're defining so the browser knows how it needs to interpolate the value.

In this case, I'm telling the browser this property is an angle. Then the keyframes code becomes quite succinct, where I'm saying animate to 360 degrees, then making it go on forever with the animation property. And there are a lot more possibilities that just this, which I hope you are intrigued enough to play around and explore on your own.

Thank you

https://chenhuijing.com

@hj_chen

@huijing

Font is Proza Libre by Bureau Roffa.

CSS variables for work and play

Sass variables

Custom properties syntax

So how to name your variables?

The var() notation

The var() notation

Inheriting CSS variable values

Debugging with Devtools

The dark/light mode toggle

森秋彩 努力の天才

Sprinkle on Javascript

Basic theming example

Maintainable variant styling

Combine with calc()

CSS variables in media queries

Sass is still relevant

Easier Javascript hooks

Easier Javascript hooks

The @property at-rule

Animate gradients with custom properties

Further reading and references

Thank you

The `var()` notation

The `var()` notation

森秋彩　努力の天才

Combine with `calc()`

The `@property` at-rule