Embed Size (px)
Citation preview
The Power and Flexibility of
CSS Variables
@guilh
https://sass-lang.com/guide
http://lesscss.org/features/#variables-feature
https://caniuse.com/#feat=css-variables
CSS variables hold references to values you can reuse
--property-name: value;
var(--property-name)
:root {
--color-primary: #278da4;
--color-secondary: #b13c69;
}
:root {
--color-primary: #278da4;
--color-secondary: #b13c69;
}
.headline {
color: var(--color-secondary);
}
.btn {
background-color: var(--color-primary);
}
:root {
--color-bg: #3acec2;
--color-bg-light: #009fe1;
}
header {
background-image: linear-gradient( var(--color-bg-light),
var(--color-bg) );
}
:root {
--color-bg: #3acec2;
--color-bg-light: #009fe1;
--gradient: var(--color-bg-light),
var(--color-bg);
}
header {
background-image: linear-gradient( var(--gradient) );
}
:root {
/* Fonts */
--font-stack-primary: 'Raleway', sans-serif;
--font-stack-secondary: 'Bree Serif', serif;
/* Layout */
--max-width: 1000px;
--margin-size: 10px;
} ¯\_(ツ)_/¯
CSS variables do things preprocessor variables can’t
Preprocessor Variables● Static ● Do not run in the browser● Not aware of the DOM structure
CSS Variables● Aware of the DOM structure● Dynamic● Update at computed value time
:root {
--margin-size: 0.5em;
}
.headline {
margin-bottom: var(--margin-size);
}
.col + .col {
margin-left: var(--margin-size);
}
@media (min-width: 576px) {
:root {
--margin-size: 2em;
}
}
@media (min-width: 768px) {
:root {
--margin-size: 3em;
}
}
:root {
/* Colors */
--color-primary: #278da4;
--color-secondary: #b13c69;
/* Fonts */
--font-stack-primary: 'Raleway', sans-serif;
--font-stack-secondary: 'Bree Serif', serif;
/* Layout */
--max-width: 1000px;
--margin-size: 10px;
}
Declare CSS variables in other places besides :root
They inherit, cascade and can be scoped to selectors
.btn {
...
background-color: var(--button-bg);
}
.btn.callout {
--button-bg: #1de9b6;
}
.btn.info {
--button-bg: #0097bf;
}
<a class="btn callout" href="#">Callout Button</a>
<a class="btn info" href="#">Info Button</a>
.btn {
...
background-color: var(--button-bg);
}
.btn.callout {
--button-bg: #1de9b6;
}
.btn.info {
--button-bg: #0097bf;
}
Style elements based on where they appear in the DOM
.card .btn {...}
.modal > .btn {...}
.banner .btn {...}
.btn {
font-size: var(--btn-font-size);
background-color: var(--btn-bg);
...
}
/* .card .btn */.card {
--btn-font-size: 0.85em; --btn-bg: #29abe6;}
/* .modal > .btn */.modal { --btn-font-size: 1em; --btn-bg: #25abaa;}
<div class="card">
<a class="btn" href="#">More</a>
</div>
<div class="modal">
<a class="btn" href="#">Start</a>
</div>
×
Modal Scope Card Scope
Perform calculations with CSS variables
:root {
--margin-size: 2;
}
.img-featured {
margin-bottom: calc(var(--margin-size) * 10px); /* 20px */
}
.headline {
margin-bottom: calc(var(--margin-size) * 1em); /* 2em */
}
Update CSS variables with JavaScript
getPropertyValue()
setProperty()
.ball {
background-color: var(--ball-bg);
transform: translate( calc( var(--pos-x) * 1px),
calc( var(--pos-y) * 1px) );
}
// Select element
const ball = document.querySelector('.ball');
// Update CSS custom property values
body.addEventListener('click', e => {
ball.style.setProperty( '--pos-x', e.clientX );
ball.style.setProperty( '--pos-y', e.clientY );
ball.style.setProperty( '--ball-bg', randomHex() );
});
// Select element
const ball = document.querySelector('.ball');
// Update CSS custom property values
body.addEventListener('click', e => {
ball.style.setProperty( '--pos-x', e.clientX );
ball.style.setProperty( '--pos-y', e.clientY );
ball.style.setProperty( '--ball-bg', randomHex() );
});
Thanks! @guilh
teamtreehouse.com
