Sass Explained: CSS With Variables, Nesting, and Logic
Introduction CSS (covered twice already) works, but it repeats itself: the same colour value in twenty places, the same media query copied again and again, no variables, no reuse. Sass, created by Hampton Catlin in 2006, is a preprocessor — a language that adds programming features to CSS and then compiles down to plain CSS the browser understands. Its SCSS syntax (the standard today) looks like CSS with superpowers, which is why it spread through large codebases long before CSS itself gained variables. Variables, nesting, and mixins Three features explain most of Sass's appeal: $primary: #2563eb; $spacing: 16px; .card { padding: $spacing; border: 1px solid $primary; h2 { color: $primary; margin-bottom: $spacing; } &:hover { border-color: darken($primary, 10%); } } @mixin center { display: flex; align-items: center; justify-content: center; } .hero { @include center; } Variables ($primary) mean a colour changes in one place, not twenty. Nest...