Definition
CSS Preprocessors are scripting languages (like Sass, LESS, and Stylus) that extend CSS by adding programming features (variables, nesting, mixins) that compile down to standard CSS.
Why It Matters
They allow developers to write modular, reusable, and DRY (Don’t Repeat Yourself) styles, making it possible to manage huge stylesheets for large-scale websites.
Core Concepts
- Variables: Declares values (like brand colors) once and reuses them.
- Nesting: Groups nested CSS selectors to match the HTML hierarchy, improving readability.
- Mixins & Extends: Reusable blocks of CSS declarations that can be injected across different rules.
How to read: “$primary-color represents the primary theme color.” Meaning / when to use: SCSS variables store reusable values like colors or fonts to maintain visual consistency.
/* SCSS Example */
$primary-color: #3498db;
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.hero {
background-color: $primary-color;
@include flex-center;
}