CSS Custom Properties (aka CSS Variable)

CSS Custom Properties
Add Variables to Your CSS

“CSS Custom Properties” — @geoffrey_crofte 2
Geoffrey Crofte
geoffrey.crofte.fr
creativejuiz.fr
UX/UI Web Designer at Maltem (Foyer)
@geoffrey_crofte

“CSS Custom Properties” — @geoffrey_crofte
Overview
What are Custom Properties?
Quick start with CSS Variables.
Why CSS C.P. instead of Sass variables?
Use cases & Demos
Takeaways

What are Custom Properties?
CSS Variables
IIIIIIII

$color: #bada55;
@color: #bada55;
This not about…

This is more about…
http://bit.ly/csscurrentcolor

currentColor
But this is not about…

A custom property is any
property whose name starts
with two dashes […] like --foo

Custom properties are solely for
use by authors and users; CSS
will never give them a meaning
beyond what is presented here.

CSS Custom Properties (aka CSS Variable)

Custom properties define variables
Variables are referenced with the var() notation
They are Case-Sensitive
Their value is “extremely permissive”
What the Spec says…

Do the fu%€
you want with them.
In other words…

--variableName: value;
CSS Declaration
:root {
}

--variableName: value;
CSS Declaration
.element {
}

property: var(--variableName);
.element {
}
CSS Use

Why CSS instead of Sass Variables?

The main issue with Sass (or LESS) variables:
They have to be computed to get their value.
Computation

Media Queries ❤ CSS Variables

Why not pushing transformations directly in JavaScript?
Now you’re wondering…

Maintainability / Portability 
style=“transform…” is dirty. Period.

style=“transform…” is dirty. Period. 
Inheritance 
style=“transform…” do not make --x and
--y inherited.

Inheritance 
--y inherited.
It’s a philosophy 
CSS is for styling. JS is not.

Inheritance 
--y inherited.
It’s a philosophy 
CSS is for styling. JS is not. 
Futur proof 
Let the CSS engine handle that part.

--variableName: value !important;
:root {
}
CSS Variables are CSS properties

--variableName: lolilol;
:root {
}
(kind of) Silent error

--spacing: 20;
:root {
}
You can’t “build up” values.
margin: var(--spacing)px;
:root {
}

--spacing: 20;
:root {
}
You can’t “build up” values.
margin: var(--spacing)px;
:root {
}
Doesn’t work

--spacing:;
:root {
}
Strange behaviour
--spacing: ;
:root {
}
Invalid
Valid
Yeah, that’s a space caracter.

Fallback value
var(--variableName, default);

Fallback value
Doesn’t support var()

Fallback value
Fallback is there

Fallback value
Fallback is there
--bgColor Value

Fallback value
Fallback is there
--bgColor Value
Transparent

Variable as Fallback
var(--var1, var(--var2, default));

Variable as Fallback
var(--var1, var(--var2, var(--var3,
var(--var4, var(--var5,
default)))));

You can’t cycle with variables

@supports (color: var(--)) {
…
}
Support Testing

Polyfills
https://github.com/aaronbarker/css-variables-polyfill

Some resources
CSS Variable Secrets (Lea Verou Smashing Conf. 2017)
CSS Custom Properties (CCSWG W3C documentation)
CSS Mouse Tracking Gradient (Gradient on Text demonstration)
CSS Variable Tutorials (A series of 4 short videos about CSS Variables)

“CSS Custom Properties” — @geoffrey_crofte 55
Geoffrey Crofte
geoffrey.crofte.fr
creativejuiz.fr
UX/UI Web Designer at Maltem (Foyer)
@geoffrey_crofte

CSS Custom Properties (aka CSS Variable)

More Related Content

Similar to CSS Custom Properties (aka CSS Variable) (20)

Recently uploaded (20)

CSS Custom Properties (aka CSS Variable)