Primary Color cannot be mixed Intermediate Color primary+secondary color.
The Power and Flexibility of CSS...
Transcript of The Power and Flexibility of CSS...
![Page 1: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/1.jpg)
The Power and Flexibility of
CSS Variables
@guilh
![Page 2: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/2.jpg)
https://sass-lang.com/guide
![Page 3: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/3.jpg)
http://lesscss.org/features/#variables-feature
![Page 4: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/4.jpg)
https://caniuse.com/#feat=css-variables
![Page 5: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/5.jpg)
CSS variables hold references to values you can reuse
![Page 6: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/6.jpg)
--property-name: value;
![Page 7: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/7.jpg)
var(--property-name)
![Page 8: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/8.jpg)
:root {
--color-primary: #278da4;
--color-secondary: #b13c69;
}
![Page 9: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/9.jpg)
:root {
--color-primary: #278da4;
--color-secondary: #b13c69;
}
.headline {
color: var(--color-secondary);
}
.btn {
background-color: var(--color-primary);
}
![Page 10: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/10.jpg)
:root {
--color-bg: #3acec2;
--color-bg-light: #009fe1;
}
header {
background-image: linear-gradient( var(--color-bg-light),
var(--color-bg) );
}
![Page 11: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/11.jpg)
:root {
--color-bg: #3acec2;
--color-bg-light: #009fe1;
--gradient: var(--color-bg-light),
var(--color-bg);
}
header {
background-image: linear-gradient( var(--gradient) );
}
![Page 12: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/12.jpg)
:root {
/* Fonts */
--font-stack-primary: 'Raleway', sans-serif;
--font-stack-secondary: 'Bree Serif', serif;
/* Layout */
--max-width: 1000px;
--margin-size: 10px;
} ¯\_(ツ)_/¯
![Page 13: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/13.jpg)
CSS variables do things preprocessor variables can’t
![Page 14: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/14.jpg)
Preprocessor Variables● Static ● Do not run in the browser● Not aware of the DOM structure
![Page 15: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/15.jpg)
CSS Variables● Aware of the DOM structure● Dynamic● Update at computed value time
![Page 16: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/16.jpg)
:root {
--margin-size: 0.5em;
}
.headline {
margin-bottom: var(--margin-size);
}
.col + .col {
margin-left: var(--margin-size);
}
![Page 17: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/17.jpg)
@media (min-width: 576px) {
:root {
--margin-size: 2em;
}
}
@media (min-width: 768px) {
:root {
--margin-size: 3em;
}
}
![Page 18: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/18.jpg)
![Page 19: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/19.jpg)
: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;
}
![Page 20: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/20.jpg)
Declare CSS variables in other places besides :root
![Page 21: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/21.jpg)
They inherit, cascade and can be scoped to selectors
![Page 22: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/22.jpg)
.btn {
...
background-color: var(--button-bg);
}
.btn.callout {
--button-bg: #1de9b6;
}
.btn.info {
--button-bg: #0097bf;
}
![Page 23: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/23.jpg)
<a class="btn callout" href="#">Callout Button</a>
<a class="btn info" href="#">Info Button</a>
![Page 24: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/24.jpg)
.btn {
...
background-color: var(--button-bg);
}
.btn.callout {
--button-bg: #1de9b6;
}
.btn.info {
--button-bg: #0097bf;
}
![Page 25: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/25.jpg)
![Page 26: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/26.jpg)
Style elements based on where they appear in the DOM
![Page 27: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/27.jpg)
.card .btn {...}
.modal > .btn {...}
.banner .btn {...}
![Page 28: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/28.jpg)
.btn {
font-size: var(--btn-font-size);
background-color: var(--btn-bg);
...
}
![Page 29: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/29.jpg)
/* .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>
![Page 30: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/30.jpg)
×
Modal Scope Card Scope
![Page 31: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/31.jpg)
Perform calculations with CSS variables
![Page 32: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/32.jpg)
:root {
--margin-size: 2;
}
.img-featured {
margin-bottom: calc(var(--margin-size) * 10px); /* 20px */
}
.headline {
margin-bottom: calc(var(--margin-size) * 1em); /* 2em */
}
![Page 33: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/33.jpg)
Update CSS variables with JavaScript
![Page 34: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/34.jpg)
getPropertyValue()
setProperty()
![Page 35: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/35.jpg)
.ball {
background-color: var(--ball-bg);
transform: translate( calc( var(--pos-x) * 1px),
calc( var(--pos-y) * 1px) );
}
![Page 36: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/36.jpg)
// 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() );
});
![Page 37: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/37.jpg)
// 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() );
});
![Page 38: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/38.jpg)
Thanks! @guilh
![Page 39: The Power and Flexibility of CSS Variablesfrontenddesignconference.com/slides/Guil_H_The-Power-and...:root {--color-primary: #278da4;--color-secondary: #b13c69;}.headline {color: var(--color-secondary);}.btn](https://reader035.fdocuments.net/reader035/viewer/2022071019/5fd281f3fd441413a708dd85/html5/thumbnails/39.jpg)
teamtreehouse.com