๐ฐvariables
a.k.a css custom properties
๐ธ Valid Names โ Cheatsheet โ Key Points
:root {
/* โญ๏ธ define css vars */
--panel-bg: #fff;
--panel-color: #000;
}
.panel {
/* โญ๏ธ use css vars */
color: var(--panel-color);
background-color: var(--panel-bg);
}
MDN โฉ CSS functions โฉ var()
Shadow DOM โฉ Use CSS Variables
Element โฉ .styleProp()
styles in shadow DOM can use variables defined in light DOM.
Valid Names
โญ๏ธ valid CSS variable names ( begin with two dashes "--
" โ๏ธ):
/* โ
valid names */
--spacing: var(--line_height);
--spacing_1: calc(var(--spacing) * var(--scale));
--spacing_2: calc(var(--spacing_1) * var(--scale));
--spacing_-1: calc(var(--spacing) / var(--scale));
/* โ not valid names */
--spacing_+1:
CodeSandbox โฉ --css-var+1 valid name?
Cheatcheet
:root {
/* โญ๏ธ CSS variable */
--main-font: Helvetica, Arial, sans-serif;
}
p {
/* โญ๏ธ use var() to reference the variable */
font-family: var(--main-font);
}
// โญ๏ธ set
elem.style.setProperty('--panel-bg', '#cdf');
// โญ๏ธ get
var styles = getComputedStyle(elem);
var bg = styles.getPropertyValue('--panel-bg');
console.log(bg.trim());
html {
--color-1: red;
--color-2: blue;
}
div {
height: 50px;
border: 1px solid black;
margin-bottom: 10px;
/*
โญ๏ธ ๆณจๆ๏ผ
ๅฆๆๆญค่กๆพๅจไธ้ข html { ... } ไธญ๏ผไธ้ข .variation ็่จญๅฎๅฐฑๆ็กๆโ๏ธ
็่ซไธ๏ผๆดๆฐ `--color-1` ๆ่ฉฒไนๆๅธถๅๆดๆฐ `--bg` ๆๅฐ๏ผไฝ้ๅชๆฏ
ใไธๅปๆ
้กใ็ๆณๆณ๏ผCSS ๅฏฆ้ไธไธฆไธๆๅ ็บๆดๆฐ `--color-1` ่ไธปๅ
ๆดๆฐ <div> ไธญ็ var(--bg)๏ผ้ค้ๆๅๅฐ `--bg` ็ๅฎ็พฉ็ดๆฅๆพๅจไฝฟ็จ
var(--bg) ็ <div> ่บซไธโ๏ธ
*/
--bg: linear-gradient(to right, var(--color-1), var(--color-2));
background: var(--bg);
}
.variation {
--color-1: green;
}
Window โฉ .getComputedStyle() - returns an object (live
CSSStyleDeclaration
object) containing the values of all CSS properties of an element.CSSStyleDeclaration โฉ
.getPropertyValue() :
DOMString
| ''
.setProperty()
window.getComputedStyle(elem);
window.getComputedStyle(elem, pseudoElem);
// style get/set property
var value = style.getPropertyValue(prop);
style.setProperty(prop, value, priority);
Element โฉ .styleProp()
key points
The custom properties behave as a sort of scoped variable because the values are inherited by descendant elements.
redefine css vars
:root {
/* โญ๏ธ define css vars */
--panel-bg: #fff;
--panel-color: #000;
}
.panel {
padding: 0.5em 1em;
border: 1px solid #999;
border-radius: 0.5em;
/* โญ๏ธ use css vars */
color: var(--panel-color);
background-color: var(--panel-bg);
}
.panel > h2 {
margin-block-start: 0;
font-size: 0.8em;
font-weight: 900;
text-transform: uppercase;
}
.dark {
margin-block-start: 1em;
/* โญ๏ธ redefine css vars */
--panel-bg: #333;
--panel-color: #fff;
}
var root = document.documentElement; // <html> element
var styles = getComputedStyle(root);
// get property value
var bg = styles.getPropertyValue('--panel-bg');
console.log(bg.trim()); // #fff
// set property value
root.style.setProperty('--panel-bg', '#cdf');
// ------------ helpers --------------
// $ โญ๏ธ
function $(selector, parent = document){
return parent.querySelector(selector);
}
// $all โญ๏ธ
function $all(selector, parent = document){
return parent.querySelectorAll(selector);
}
<!-- A regular panel on the page -->
<div class="panel">
<h2>Light Version</h2>
<div class="body">
We have built partnerships with small farms around the world to hand-select beans at the peak of season. We then careful roast in small batches to maximize their potential.
</div>
</div>
<aside class="dark">
<!-- The second panel inside a dark container -->
<div class="panel">
<h2>Dark Version</h2>
<div class="body">
We have built partnerships with small farms around the world to hand-select beans at the peak of season. We then careful roast in small batches to maximize their potential.
</div>
</div>
</aside>
Last updated