CoursesFrontend DevelopmentSass / SCSS Tutorial
BeginnerFree
5.0(3,399 reviews)

Sass / SCSS Tutorial logoSass / SCSS Tutorial

Learn Sass / SCSS from beginner to advanced with practical examples, variables, mixins, architecture patterns, and scalable styling workflows.

60 Lessons
Step by step
25 Hours
Estimated duration
16.0K
Students enrolled
Certificate
Upon completion
Start Learning Free

What You'll Learn

Sass and SCSS Introduction
Installing Sass
Sass File Compilation
SCSS Syntax Basics
Nested Rules Introduction
Variables in Sass

Course Content

60 lessons • 25 hours total
Course Progress0% Complete

Practice editor is inside each lesson

Open any lesson to use the Try It Yourself editor with course-specific practice code.

Open First Lesson
01

Module 1

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Sass and SCSS IntroductionTry It Yourself available
9:07Try It Yourself
Installing SassTry It Yourself available
11:17Try It Yourself
Sass File CompilationTry It Yourself available
13:27Try It Yourself
SCSS Syntax BasicsTry It Yourself available
15:37Try It Yourself
Nested Rules IntroductionTry It Yourself available
17:47Try It Yourself
02

Module 2

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Variables in SassTry It Yourself available
15:42Try It Yourself
Color Tokens and Design VariablesTry It Yourself available
17:52Try It Yourself
Maps in SassTry It Yourself available
19:02Try It Yourself
Lists in SassTry It Yourself available
9:12Try It Yourself
Interpolation BasicsTry It Yourself available
11:22Try It Yourself
03

Module 3

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Nesting Best PracticesTry It Yourself available
9:17Try It Yourself
Parent Selector UsageTry It Yourself available
11:27Try It Yourself
Partial Files BasicsTry It Yourself available
13:37Try It Yourself
Import vs Use ForwardTry It Yourself available
15:47Try It Yourself
Sass Project StructureTry It Yourself available
17:57Try It Yourself
04

Module 4

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Mixins IntroductionTry It Yourself available
15:52Try It Yourself
Mixins with ArgumentsTry It Yourself available
17:02Try It Yourself
Mixins with Default ValuesTry It Yourself available
19:12Try It Yourself
Reusable Button MixinsTry It Yourself available
9:22Try It Yourself
Responsive MixinsTry It Yourself available
11:32Try It Yourself
05

Module 5

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Functions in SassTry It Yourself available
9:27Try It Yourself
Custom Math FunctionsTry It Yourself available
11:37Try It Yourself
Color FunctionsTry It Yourself available
13:47Try It Yourself
String FunctionsTry It Yourself available
15:57Try It Yourself
Utility Generator FunctionsTry It Yourself available
17:07Try It Yourself
06

Module 6

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Extend and PlaceholdersTry It Yourself available
15:02Try It Yourself
When to Use ExtendTry It Yourself available
17:12Try It Yourself
Placeholders for PatternsTry It Yourself available
19:22Try It Yourself
Avoiding CSS BloatTry It Yourself available
9:32Try It Yourself
Mixins vs ExtendTry It Yourself available
11:42Try It Yourself
07

Module 7

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Operators in SassTry It Yourself available
9:37Try It Yourself
Loops with EachTry It Yourself available
11:47Try It Yourself
Loops with ForTry It Yourself available
13:57Try It Yourself
Conditional Logic with IfTry It Yourself available
15:07Try It Yourself
Generating Utility ClassesTry It Yourself available
17:17Try It Yourself
08

Module 8

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Modular Sass ArchitectureTry It Yourself available
15:12Try It Yourself
7-1 Pattern BasicsTry It Yourself available
17:22Try It Yourself
Base Layout and ComponentsTry It Yourself available
19:32Try It Yourself
Abstracts and UtilitiesTry It Yourself available
9:42Try It Yourself
Page Specific PartialsTry It Yourself available
11:52Try It Yourself
09

Module 9

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Theming with SassTry It Yourself available
9:47Try It Yourself
Light and Dark Theme TokensTry It Yourself available
11:57Try It Yourself
Responsive Theme VariablesTry It Yourself available
13:07Try It Yourself
Managing Shared ValuesTry It Yourself available
15:17Try It Yourself
Scalable Design SystemsTry It Yourself available
17:27Try It Yourself
10

Module 10

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Sass with BootstrapTry It Yourself available
15:22Try It Yourself
Sass in Vite and WebpackTry It Yourself available
17:32Try It Yourself
Sass with Next.jsTry It Yourself available
19:42Try It Yourself
Sass Performance TipsTry It Yourself available
9:52Try It Yourself
Source Maps and DebuggingTry It Yourself available
11:02Try It Yourself
11

Module 11

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Refactoring Large StylesheetsTry It Yourself available
9:57Try It Yourself
Naming Conventions in SassTry It Yourself available
11:07Try It Yourself
Reusable Layout MixinsTry It Yourself available
13:17Try It Yourself
Documentation for Sass SystemsTry It Yourself available
15:27Try It Yourself
Sass Best PracticesTry It Yourself available
17:37Try It Yourself
12

Module 12

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Sass Landing Page ProjectTry It Yourself available
15:32Try It Yourself
Sass Component Library ProjectTry It Yourself available
17:42Try It Yourself
Sass Dashboard Styling ProjectTry It Yourself available
19:52Try It Yourself
Sass Blog Theme ProjectTry It Yourself available
9:02Try It Yourself
Sass Architecture Final ProjectTry It Yourself available
11:12Try It Yourself

Try It Yourself

Practice this course here with Sass and SCSS Introduction.

Open Full Lesson

Try It Yourself

Loading editor...

Requirements

  • No prior coding experience needed
  • A computer with internet access
  • Any modern web browser (Chrome, Firefox, Safari)
  • Text editor (VS Code recommended)

Student Reviews

0.0(0 reviews)
No reviews yet. Be the first student to add one.

Add Your Review

Rating

Instructor

Instructor Ali Moavia
Ali Moavia
Senior Web Developer

Full-stack developer with 3+ years of experience. Passionate about teaching web technologies.

50K+ students
12 courses

Related Courses

HTML Tutorial logo

HTML Tutorial

Beginner • Frontend Development

Learn HTML from beginner to advanced with practical examples.

4.8
CSS Tutorial logo

CSS Tutorial

Beginner • Frontend Development

Learn CSS from beginner to advanced with practical examples, layouts, animations, responsive design, and modern styling techniques.

4.9

Share this course