SASS Tutorial
SASS (Syntactically Awesome Style Sheets) is a CSS pre-processor. You write .scss files with variables, nesting, mixins, and functions, then a compiler turns it into plain CSS the browser understands.
What SASS gives you that vanilla CSS doesn't (or didn't)
| Feature | SASS | Today's CSS |
|---|---|---|
| Variables | $brand: #04AA6D; | --brand: #04AA6D; (also nice) |
| Nesting | Native | Now native (modern browsers). |
| Mixins | @mixin card { … } | — |
| Functions | darken($brand, 10%) | Some via color-mix(). |
| Partials & imports | @use, @forward | @import (limited). |
| Loops & conditionals | @for, @if | — |
A quick taste
SCSS
$brand: #04AA6D;
$radius: 6px;
@mixin card {
background: #fff;
border-radius: $radius;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.card {
@include card;
padding: 16px;
.title { color: $brand; font-weight: bold; }
&:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
}
Compiling
CLI
npm i -D sass npx sass src/styles.scss public/styles.css --watch
Tip: With CSS custom properties and native nesting shipping, the gap between SASS and CSS has narrowed. Use SASS when you want mixins, loops, or shared toolchains. Plain CSS is fine for most new greenfield projects.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>SASS Tutorial</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Declare a SASS variable for the brand colour.
brand: #04AA6D;
SASS variables start with a single character.
Discussion
Loading…