CSS Variables @guilh https://sass-lang.com/guide - PowerPoint PPT Presentation

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 { <div class="card"> --btn-font-size: 0.85em; <a class="btn" href="#">More</a> --btn-bg: #29abe6; </div> } /* .modal > .btn */ <div class="modal"> .modal { --btn-font-size: 1em; <a class="btn" href="#">Start</a> --btn-bg: #25abaa; </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