CSS variables for work and play

By Chen Hui Jing / @hj_chen

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🐈‍⬛ 🧗 🏳️‍🌈
Chen Hui Jing
Jing
@hj_chen
Shopify
Sass logo
                $base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}
              
Less logo
                @link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);

.link {
  color: @link-color;
}
.link:hover {
  color: @link-color-hover;
}
              
Stylus logo
                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

The var() notation

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

Hello, I am a box! :)

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.

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

森秋彩 努力の天才

多くの人が待ち望んだシニア国際大会デビュー。世界選手権では得意のリードで日本人最年少メダルを獲得。幼い頃から数々の大会を制してきた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.

Maintainable variant styling

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

Solar

Moonbyul

Moonbyul

Wheein

Wheein

Hwasa

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

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.

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;
}

Animate gradients with custom properties

Further reading and references

Thank you

Websitehttps://chenhuijing.com

Twitter@hj_chen

GitHub@huijing

Codepen@huijing

Font is Proza Libre by Bureau Roffa.