|
Yesterday, I mentioned that I love CSS variables. Today, I thought I'd explain what they are and how they work, for those who aren't already familiar with them. Let's dig in! How to define CSS variablesYou define a CSS variable by typing its name with a leading double-dash ( It uses the same syntax a typical CSS property— You can then use your CSS variable just like you would any other property value by wrapping it in CSS variables have to be defined on the element they're being used on or a parent of that element (they inherit just like all other things CSS). You're probably thinking: this seems like more work to do the same thing. You're right… in this specific example. Let's look at how to make CSS variables more useful. Global CSS variablesOne common approach to working with CSS variables is define a bunch of global variables on the This typically includes things like colors, sizes, and typefaces. Because the Unlike the first example, they can now be reused, which makes them far more functional. And if you need to change an aspect of your design system—like a color or typeface—you update a single value and have it change everywhere. Tomorrow, I'm going to share a technique for using CSS variables that reduces the amount of redeclared variables you need to use and puts the power of the cascade to full effect. Cheers, Want to share this with others or read it later? View it in a browser. |
0 Komentar untuk "[Go Make Things] CSS variables"