PROJECTS
CSS
CSS
.site-navigation {
background-color: var(--color-red);
}.site-footer {
color: var(--color-red);
}
The :root pseudo selector targets the highest-level
parent element in the DOM, giving all elements
access to --color-red. Yes, CSS variables definition
should start with --, and you can access them
anywhere with var(). Well, anywhere that is cascaded
under our :root selector.AN INTRO TO CSS
CUSTOM PROPERTIES
The promise of future-proof CSS and why you should start writing valid
CSS. Learn the basics with Krisztian Puska
One of the single best features of CSS
processors is variables. Having the ability to
declare once and reuse the variable across your
project should not be optional in any system. Using a
pre-processor like Sass or Less gives you at least one
extra build step, which can be a pain if you just want
to build a thing fast. CSS has come a long way since
the dark days of table hacks, so let’s look into one of
the most useful aspects: custom properties.
We’ll start with a simple example.:root {
--color-red: #fc4752;
}ABOUT THE AUTHOR
KRISZTIAN
PUSKA
w: https://let.codes
t: @pyx
job: Co-founder of Let
areas of expertise:
Design systems, CSS,
front-end development