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?

Tailwind CSS Cheat Sheet

Material UI Cheat Sheet

Explore Topics

#SassSCSS#SassSCSSCheatSheet#WebDevelopment#Beginner#VariablesNesting#MixinsFunctions#PartialsModules#ControlDirectives#Functions#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services