Slide 1
Slide 1 text
One step in the future:
CSS Variables
version ✌
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Giacomo Zinetti
Giko
Slide 4
Slide 4 text
Action plan
●
●
●
●
●
●
●
Slide 5
Slide 5 text
Theory
Slide 6
Slide 6 text
Define
--your-property: value;
Slide 7
Slide 7 text
How to define a property
:root {
--button-color: blue;
--align: left;
}
header {
--header-height: 300px;
}
Slide 8
Slide 8 text
Use
var(--your-property, default-value)
Slide 9
Slide 9 text
How to use a variable
button {
background-color: var(--button-color);
}
a {
color: var(--link-color, black);
}
Slide 10
Slide 10 text
Quiz time:
Inherited or
not?
Slide 11
Slide 11 text
Quiz time:
Inherited or
not?
Slide 12
Slide 12 text
VS Preprocessors
Slide 16
Slide 16 text
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Media queries
$gutter: 10px;
@media (min-width: 768px) {
$gutter: 15px;
}
article {
padding: $gutter;
}
Slide 17
Slide 17 text
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Media queries compiled
$gutter: 10px;
@media (min-width: 768px) {
$gutter: 15px;
}
article {
padding: $gutter 10px;
}
Slide 18
Slide 18 text
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Media queries
$gutter: 10px;
@media (min-width: 768px) {
$gutter: 15px;
}
article {
padding: $gutter;
}
Preprocessors: Nope
Slide 19
Slide 19 text
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Preprocessors solution
$gutter: 10px;
$gutter-large: 15px;
@media (min-width: 768px) {
article {
padding: $gutter-large;
}
}
article {
padding: $gutter;
}
Slide 20
Slide 20 text
But…
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article.class {
padding: var(--gutter);
}
$gutter: 10px;
$gutter-large: 15px;
@media (min-width: 768px) {
article {
padding: $gutter-large;
}
}
article.class {
padding: $gutter;
}
Slide 21
Slide 21 text
But… they can be friends
Slide 22
Slide 22 text
Example
Slide 28
Slide 28 text
Javascript
Slide 29
Slide 29 text
Read
getComputedStyle(element).getPropertyValue('--color');
element.style.setProperty('--color', 'red');
Write
Slide 30
Slide 30 text
Support
Slide 31
Slide 31 text
Browsers
49+ 31+ 15? 36+ 9.1+
Jan 2017: 68.34%
Slide 32
Slide 32 text
Fallback property
@supports (--foo: green) {
body {
color: var(--my-color);
}
}
Feature query
color: red;
color: var(--my-color, red);
Slide 33
Slide 33 text
Good news
Slide 36
Slide 36 text
Use case:
Theming
Slide 37
Slide 37 text
.theme(@bg: gray, @col: red, @var: blue) {
.box { background: @bg }
.button { color: @col }
.box .button { color: @var }
}
.theme();
.dark {
.theme(black, orange, lightgreen);
}
Theming with LESS
Slide 38
Slide 38 text
.box { background: gray }
.button { color: red }
.box .button { color: blue }
.dark .box { background: black }
.dark .button { color: orange }
.dark .box .button { color: lightgreen }
Theming with CSS
Slide 39
Slide 39 text
.box {
--col: var(--alt, blue);
background: var(--bg, lightgray);
}
.button {
color: var(--col, red);
}
.dark {
--bg: black;
--col: orange;
--alt: lightgreen;
}
Theming with CSS Variables
Slide 40
Slide 40 text
Questions?
Slide 41
Slide 41 text
Grazie!
@giacomozinetti