CSS variables vs. SASS variables 관련

How to use CSS variables like a pro

---

Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

---

How to use CSS variables like a pro

Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

The following table will help you know when to use CSS variables and preprocessor variables:

Feature	CSS variables	Preprocessor variables
Scope	Can be dynamically modified at runtime	Compiles to static values before rendering
Use cases	Great for dynamic theming, user-controlled styles, or runtime updates	Great for working with a large-scale project that benefits from functions, mixins, and nested styles
Usage	Works directly in browsers	Requires a pre-processor like Less or SASS
Performance	Results in slightly higher runtime cost due to look up but mostly negligible in most cases	No runtime cost, but may impact load time due to larger stylesheets.
Runtime update	Can be modified easily with JavaScript	Impossible to update with JavaScript because it requires recompilation