๐ฐvariables
a.k.a css custom properties
Last updated
Was this helpful?
a.k.a css custom properties
Last updated
Was this helpful?
Was this helpful?
๐ธ 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);
}The custom properties behave as a sort of scoped variable because the values are inherited by descendant elements.
| ''.setProperty()
/* โ
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: :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;
}: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>window.getComputedStyle(elem);
window.getComputedStyle(elem, pseudoElem);
// style get/set property
var value = style.getPropertyValue(prop);
style.setProperty(prop, value, priority);