Sass/SCSS Cheat Sheet
Covers Sass/SCSS variables, nesting, mixins, functions, and the modern @use/@forward module system for writing maintainable CSS.
2 PagesBeginnerFeb 25, 2026
Variables & Nesting
Declaring variables and nesting selectors.
scss
// Variables$primary-color: #3498db;$spacing: 16px;// Nesting.card { padding: $spacing; border: 1px solid $primary-color; &:hover { // parent selector reference box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } .title { // nested descendant selector font-weight: bold; }}
Mixins & Functions
Reusable style blocks and custom value calculations.
scss
@mixin flex-center($gap: 0) { display: flex; align-items: center; justify-content: center; gap: $gap;}.btn-row { @include flex-center(8px);}@function rem($px, $base: 16) { @return ($px / $base) * 1rem;}.title { font-size: rem(24); // 1.5rem}
Partials & Modules
Splitting styles across files with @use and @forward.
scss
// _colors.scss (partial, filename starts with _)$primary: #3498db;$danger: #e74c3c;// main.scss@use 'colors'; // modern module system@use 'colors' as c; // with alias.alert { background: colors.$primary; // namespaced access}// Legacy (older Sass, still common in existing codebases):@import 'colors'; // deprecated, being phased out
Control Directives
Logic constructs for generating CSS programmatically.
- @if / @else if / @else- conditionally generate CSS rules based on a Sass expression
- @each $item in $list- loop over a list or map, binding each value to a variable
- @for $i from 1 through 5- numeric loop, inclusive of the end value (use to instead of through to exclude it)
- @while $i < 5- loop while a condition remains true
- %placeholder + @extend- share a block of styles across selectors without duplicating declarations
- Nested @media- write media queries inside a selector's own nesting block instead of duplicating the selector
Pro Tip
Use @use instead of @import for new code (import is deprecated and being removed from the language), and keep shared variables in a single partial forwarded via @forward so consumers only need one entry-point import.
Was this cheat sheet helpful?
Explore Topics
#SassSCSS#SassSCSSCheatSheet#WebDevelopment#Beginner#VariablesNesting#MixinsFunctions#PartialsModules#ControlDirectives#Functions#CheatSheet#SkillVeris
