SCSS tutorial

Learn how variables, nesting, and mixins make CSS easier to manage.

Start the course

Course contents

Getting Started

  1. Introduction to SCSS — What SCSS is, why developers use it, how it differs from CSS and Sass, what .scss syntax and comments look like, and how SCSS is compiled.
  2. SCSS Setup — How to install Sass with npm, use the Sass CLI, compile SCSS input into CSS output, run watch mode, and set up a basic SCSS project.

Fundamentals

  1. Variables — How to create $ variables, what scope means, local and global variables, shadowing, !default, !global, and how Sass variables differ from CSS custom properties.
  2. Nesting — How to nest selectors and properties, use the parent selector &, attach pseudo-classes and pseudo-elements with &, and nest safely.
  3. Interpolation — What interpolation is, how the #{} syntax works, and how to use it in selectors, property names, values and strings.
  4. Data Types — The kinds of values SCSS stores: numbers, strings, colors, booleans, lists, maps and null, plus how to work with lists, maps and nested maps.
  5. Operators — How to do math with arithmetic operators, compare values, combine true and false with boolean operators, and join text with string operators.
  6. Conditionals — How to use @if, @else if and @else, add styles based on a condition, combine conditions, use conditions with variables, and practical patterns.

Organization

  1. Modules — How to split styles into partials, name partial files, load them with @use, work with namespaces, pass files along with @forward, and why @import is deprecated.

Reusable Styles

  1. Mixins — What a mixin is, how to create one with @mixin and use it with @include, parameters, default parameters, keyword arguments, argument lists, @content and practical patterns.
  2. Functions — What SCSS functions are, built-in math and color functions, how to write custom functions with parameters and @return, and how functions differ from mixins.
  3. Inheritance — How to share styles with @extend, use placeholder selectors, extend one or many selectors, compare @extend with mixins, avoid selector bloat, and when to use @extend.

SCSS Logic

  1. Loops — How to repeat styles with @for, @each and @while, loop through lists and maps, and generate repeated styles and utility classes.

Practical SCSS

  1. Responsive Design — How to use breakpoint variables and maps, write responsive mixins, work mobile-first, write media queries, nest them, and generate responsive styles.
  2. BEM Components — How to write component styles with BEM naming: blocks, elements with __, modifiers with --, state classes, using & with BEM, and organizing component files.
  3. Design Tokens — What design tokens are, primitive and semantic tokens, token maps, generating CSS custom properties, what a theme is, and how to build light and dark themes.

SCSS Architecture

  1. Project Structure — Why SCSS project structure matters, how to organize files and folders for variables, mixins, base, components and layout, the main entry file, @use and @forward, and the 7-1 pattern.
  2. Migrate CSS to SCSS — How to migrate CSS to SCSS step by step: rename files, extract variables and mixins, split partials, move from @import to @use, verify the result, and use Stylelint and Prettier.

SCSS Quality

  1. Debugging SCSS — How to read and fix common SCSS compilation errors, scope, interpolation and namespace errors, undefined variables and functions, and how to use @debug, @warn and @error.
  2. Best Practices — Good SCSS habits: shallow nesting, clear variables, mixins vs @extend, reusable code, organized files, small CSS output, naming conventions and when to use native CSS.

Reference

  1. Cheat Sheet — All the SCSS syntax from this course in one place: variables, nesting, the parent selector, interpolation, modules, mixins, functions, @extend, data types, operators, conditions and loops.