Welcome to Sass / SCSS Tutorial

Learn Sass and SCSS from the ground up with clear explanations, practical examples, easy to understand code snippets, a comprehensive reference, and hands on mini projects.

This tutorial guides you from basic syntax to compiling workflow so you can write maintainable styles and produce browser ready CSS. Start Learning Sass Now

Sass Example

SCSS Code
Sass Code
CSS Code
Basic SCSS Syntax Example
$brand-color: #2c3e50;
.header {
	background: $brand-color;
	color: #fff;

	.title {
		font-size: 20px;
		padding: 8px 12px;
	}
}

Prerequisites

To get the most from this Sass tutorial you should have:

  • Basic HTML and CSS knowledge
  • Node or a Sass compiler if you plan to compile locally (installation guide)
  • A code editor with Sass or SCSS support
  • Willingness to practice with examples

What you will learn

This tutorial teaches the essentials and practical workflows for Sass/SCSS including:

  • Sass indented and SCSS block syntax
  • Variables, mixins, functions, and nesting
  • Partials, imports, and modular stylesheet organization
  • Compiling SCSS or Sass into browser ready CSS
  • Source maps, minification, and integration with build tools
  • Debugging and best practices for maintainable styles

Who should follow this tutorial

This course fits a broad range of learners and use cases:

  • Beginners who want a structured path from CSS to Sass or SCSS
  • Front end developers who need a practical reference
  • Designers who want reusable variables and mixins
  • Engineers integrating preprocessor steps into CI or build pipelines

How this Course is Structured

Lessons are short and focused and include:

  • Theory that explains concepts in plain language
  • Examples with runnable code and expected output
  • Code reference for quick lookup of language features
  • Mini projects to apply what you learned and build a small stylesheet system

SCSS Code Examples

Examples show both SCSS and Sass code with compiled CSS output so you can follow along.

SCSS Example

SCSS Example with Variables and Nesting
$primary-color: #3498db;

.card {
	background: $primary-color;
	color: #fff;
	.title {
		font-weight: 700;
		margin: 0;
	}
}

.card {
	background: #3498db;
	color: #fff;
}
.card .title {
	font-weight: 700;
	margin: 0;
}

Mixin Example

Mixin and Include Example
@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.container {
	@include flex-center;
	height: 200px;
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
}

Get started

Begin with the Sass introduction tutorial for an overview and pick the syntax you prefer either SCSS or indented syntax.

When you are ready follow the installation guide to set up a local compiler or use an online converter to compile SCSS to CSS instantly.

Feedback and contributions are welcome. Share suggestions or report issues through the contact page.