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. Nesting mirrors your HTML structure, so a card's heading styles live inside the card's block. Mixins (@mixin) are reusable chunks of styles you include with @include — the closest CSS gets to functions. Together they turn a sprawling stylesheet into something organised, especially on large sites where plain CSS grows messy.

The honest trade

Sass's trade is a build step: browsers don't run Sass, so your code must be compiled to CSS first (usually by Vite, Webpack, or another tool from earlier posts). And modern CSS has closed much of the gap — native custom properties now handle variables, and native nesting is arriving in browsers — so for small projects, plain CSS plus Tailwind (the previous batch) may be enough. Sass still earns its place on large codebases, where its mixins, partials (splitting styles across files), and functions organise complexity that plain CSS handles awkwardly.

Takeaway

Sass is CSS with variables, nesting, and mixins, compiled down to plain CSS. It caught on by fixing CSS's repetition problem, and while modern CSS has caught up on variables, Sass remains the organiser of choice for large stylesheets.

Comments

Post a Comment

Popular posts from this blog

Swift Explained: Apple's Language for iPhone, Mac, and More

Introduction Swift is Apple's language for its platforms: iPhone, iPad, Mac, Apple Watch, and Apple TV. Introduced in 2014 to replace the older Objective-C, it was designed to be safe, fast, and — unusually for a systems language — genuinely pleasant to read and write. Even if you never ship an app, Swift teaches one idea every developer should understand: optionals. Optionals: saying "this might be missing" Most bugs in app development come from one cause: code assuming a value exists when it does not. Swift makes that assumption impossible to hide. A value that might be missing is wrapped in an Optional, and you must unwrap it before use. var nickname: String? = nil nickname = "Waqas" if let name = nickname { print("Hello, \(name)!") } else { print("No nickname set.") } String? means "a String, or nothing". The if let unwraps it safely: inside the block, name is guaranteed to exist. There is no way to accidentally us...
Read more

Flutter Explained: One Codebase, Every Screen

Introduction Flutter is Google's framework for building apps from a single codebase: write once in Dart, and ship to iOS, Android, web, Windows, macOS, and Linux. It powers apps from Google Pay to the New York Times crossword app. Its core idea is simple and radical: everything on screen is a widget, and the interface is rebuilt from data whenever that data changes. Everything is a widget In Flutter, there are no separate concepts for layout, styling, and controls — everything is a widget, nested inside other widgets like HTML elements, but in code: import 'package:flutter/material.dart'; class Greeting extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, Sara!', style: TextStyle(fontSize: 24, color: Colors.teal), ), ); } } Center positions its child, Text displays words, TextStyle styles them — each a widget, composed by nesting. Layout widgets (like Row, Column, ...
Read more

Go Explained: Simple Code That Runs Fast

Introduction Go was built at Google for a specific frustration: large programs that were slow to build and hard to read. The answer was a language that is deliberately small — fewer features, but the right ones, done well. If you know one programming language already, Go will feel familiar within an hour. The interesting parts are not the syntax, but two ideas: goroutines and channels. Goroutines: cheap concurrency Most languages make running things at the same time feel heavy — threads, thread pools, and careful setup. A goroutine is Go's lightweight version: you start one by writing go in front of a function call. package main import ( "fmt" "time" ) func say(text string) { for i := 0; i < 3; i++ { fmt.Println(text) time.Sleep(100 * time.Millisecond) } } func main() { go say("hello") say("world") time.Sleep(500 * time.Millisecond) } The go say("hello") line does not wait — it st...
Read more