In short
Sass adds nesting, mixins, loops and partial files to CSS. It gets compiled into normal CSS, so browsers never know it was there.
A CSS preprocessor adding variables, nesting, mixins and functions to plain CSS, compiled down to regular CSS the browser understands. Preprocessors can improve organization and reuse, although modern CSS now provides many capabilities—such as custom properties, nesting, and functions—that reduce the need for preprocessing.
Think of it like this
Atta dough vs the roti
You knead dough with water, salt and oil, but what lands on the plate is a roti. Sass is the dough: you write with extra tools, and the compiler 'cooks' it into plain CSS that the browser eats.
Watch it happen
From SCSS to plain CSS
1/5The partial holds the $brand variable and the md mixin. Its underscore means it isn't compiled alone.
The big ideas
What you need to know
SCSS vs Sass
SCSS uses braces and semicolons like CSS, so any CSS file is valid SCSS. The older Sass syntax uses indentation instead.
Nesting and &
Nest rules inside their parent and use & for the parent itself, like &:hover or &--active.
Mixins and functions
@mixin saves a group of styles you can include anywhere, like a reusable breakpoint.
Partials with @use
Split files like _buttons.scss and load them with @use. The older @import is deprecated in Sass.
See it in code
Walk through the code
1// _tokens.scss2$brand: #ec4899;3@mixin md { @media (min-width: 768px) { @content; } }4 5// main.scss6@use "tokens" as t;7 8.card {9 padding: 1rem;10 border: 1px solid rgba(t.$brand, 0.3);11 12 &__title { color: t.$brand; }13 &:hover { border-color: t.$brand; }14 15 @include t.md { padding: 2rem; }16}1/4The partial defines a colour variable and a reusable min-width mixin.
&__title compiles to .card__title, which pairs nicely with BEM. The md mixin wraps a media query you can reuse.
Save yourself the pain
Common mistakes
Oops
Nesting five levels deep because you can.
Do this instead
Keep nesting to two or three levels. Deep nesting creates long, over-specific selectors.
Oops
Using @import to split files in new projects.
Do this instead
Use @use and @forward. They avoid duplicate output and keep variables scoped.
Your mission
Sass up a project
Quick check
Inside .btn { &--primary { ... } }, what selector does Sass output?
Go deeper
- 1Convert a plain CSS file to SCSS using nesting and variables. Validate your understanding by applying it in a small practical example.
- 2Write a reusable mixin (e.g. for flex centering) and use it in multiple places. Validate your understanding by applying it in a small practical example.
- 3Learn `@use`/`@forward` for splitting styles into partial files.
More styling tools & libraries at this stop
Tailwind CSS
Bootstrap
Styled Components
CSS Modules
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
