Learn Sass
Sass is a CSS preprocessor that adds variables, nesting, mixins, and functions on top of CSS so stylesheets stay organized and easy to maintain as a project grows.
What Is Sass?
Sass, short for Syntactically Awesome Style Sheets, is a scripting language that extends CSS with features such as variables, nesting, mixins, functions, and control directives. Sass code does not run in the browser directly - it is compiled into standard CSS that every browser already understands, so you gain extra tooling without waiting on new browser support.
Why Use a CSS Preprocessor?
Plain CSS has no built-in way to store a repeated value, share a group of declarations, or perform calculations. On a large project this leads to the same color code pasted into dozens of files, magic numbers scattered everywhere, and stylesheets that are painful to refactor. A preprocessor like Sass compiles a more expressive language down to CSS, letting you write structured, DRY source files while still shipping ordinary CSS to the browser.
- Variables - store colors, fonts, and sizes in one named place
- Nesting - mirror your HTML structure inside your selectors
- Partials and @use - split styles across many small files
- Mixins and functions - reuse groups of declarations and computed values
- Control directives - use @if, @each, and @for to generate CSS programmatically
Sass vs SCSS Syntax
Sass actually ships with two syntaxes. The original .sass syntax is indentation-based and drops braces and semicolons entirely. The newer .scss syntax is a superset of CSS - every valid CSS file is already valid SCSS - and keeps the familiar curly-brace, semicolon style. This tutorial uses SCSS throughout, because it is the syntax most teams choose today and it reads almost exactly like the CSS you already know.
A First Look at SCSS
<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<button class="button">Hover me</button>
<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js"></script>
<script>
Sass.setWorkerUrl('https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.worker.js');
var sass = new Sass();
var scss = "$brand-color: #2f6f4f;\n\n.button {\n background-color: $brand-color;\n padding: 10px 16px;\n border-radius: 4px;\n\n &:hover {\n background-color: darken($brand-color, 10%);\n }\n}";
sass.compile(scss, function (result) {
if (result && typeof result.text === "string") {
document.getElementById("compiled-css").textContent = result.text;
} else {
var msg = (result && (result.formatted || result.message)) || "Unknown Sass compile error";
var pre = document.createElement("pre");
pre.style.color = "#b00020";
pre.style.whiteSpace = "pre-wrap";
pre.style.fontFamily = "monospace";
pre.style.padding = "16px";
pre.textContent = "Sass compile error:\n" + msg;
document.body.prepend(pre);
}
});
</script>
</body>
</html>Nothing you write in a .scss file reaches the browser as-is. A Sass compiler reads the file, resolves every variable, expands nested selectors into flat CSS rules, evaluates functions, and writes out a plain .css file. That generated file is what you actually link from your HTML, exactly like any hand-written stylesheet.
Nesting Compiles to Flat CSS
<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<div class="card"><div class="card-title">Card Title</div></div>
<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js"></script>
<script>
Sass.setWorkerUrl('https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.worker.js');
var sass = new Sass();
var scss = "// SCSS input\n.card {\n border: 1px solid #ddd;\n\n .card-title {\n font-weight: bold;\n }\n}\n\n/* Compiled CSS output */\n.card {\n border: 1px solid #ddd;\n}\n.card .card-title {\n font-weight: bold;\n}";
sass.compile(scss, function (result) {
if (result && typeof result.text === "string") {
document.getElementById("compiled-css").textContent = result.text;
} else {
var msg = (result && (result.formatted || result.message)) || "Unknown Sass compile error";
var pre = document.createElement("pre");
pre.style.color = "#b00020";
pre.style.whiteSpace = "pre-wrap";
pre.style.fontFamily = "monospace";
pre.style.padding = "16px";
pre.textContent = "Sass compile error:\n" + msg;
document.body.prepend(pre);
}
});
</script>
</body>
</html>A Small Mixin Example
<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<nav class="nav">Nav content</nav>
<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js"></script>
<script>
Sass.setWorkerUrl('https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.worker.js');
var sass = new Sass();
var scss = "@mixin flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.nav {\n @include flex-center;\n height: 60px;\n}";
sass.compile(scss, function (result) {
if (result && typeof result.text === "string") {
document.getElementById("compiled-css").textContent = result.text;
} else {
var msg = (result && (result.formatted || result.message)) || "Unknown Sass compile error";
var pre = document.createElement("pre");
pre.style.color = "#b00020";
pre.style.whiteSpace = "pre-wrap";
pre.style.fontFamily = "monospace";
pre.style.padding = "16px";
pre.textContent = "Sass compile error:\n" + msg;
document.body.prepend(pre);
}
});
</script>
</body>
</html>Exercise: Sass Introduction
What best describes what Sass fundamentally is?
Frequently Asked Questions
- Is Sass still needed now that CSS has variables?
- Less than it was. Native custom properties, nesting and colour functions cover much of what Sass was used for. It still earns its place in large codebases for mixins, loops and splitting styles across many files that compile into one.
- What is the difference between Sass and SCSS?
- Two syntaxes for the same language. SCSS uses braces and semicolons, so any valid CSS file is already valid SCSS. The older indented syntax drops both. SCSS is what nearly every project uses today.
- Do I need to learn CSS before Sass?
- Yes. Sass compiles to CSS and adds no styling capability of its own, so every property and layout rule you write is CSS knowledge. Without it, Sass features simply hide what the browser is actually doing.
