? SASS Tutorial — CSS Preprocessor Basics

SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that adds powerful features like variables, nesting, mixins, functions, and more to write cleaner, reusable, and maintainable CSS.

Why use SASS?

• Write less repetitive code

• Use variables for colors, fonts, sizes

• Nest CSS selectors logically

• Use functions and math operations

• Create reusable blocks with mixins

Installation

You can use SASS via npm, Ruby gem, or online tools.

npm install -g sass

Basic Syntax

SASS has two syntaxes:

• SCSS (Sassy CSS) — CSS-like syntax (most common)

• Indented syntax — uses indentation instead of braces and semicolons

We focus on SCSS here.

1. Variables

$primary-color: #3498db;$font-stack: Helvetica, sans-serif;body {  font-family: $font-stack;  color: $primary-color;}

2. Nesting

nav {  ul {    list-style: none;  }  li {    display: inline-block;  }  a {    color: $primary-color;    text-decoration: none;    &:hover {      text-decoration: underline;    }  }}

3. Mixins

Reusable groups of CSS declarations.

@mixin flex-center {  display: flex;  justify-content: center;  align-items: center;}.container {  @include flex-center;  height: 100vh;}

4. Functions and Operations

$base-font-size: 16px;.container {  font-size: $base-font-size * 1.2; // 19.2px}

5. Partials and Import

Split CSS into smaller files and import them.

// _colors.scss$primary-color: #3498db;// style.scss@import 'colors';body {  color: $primary-color;}

6. Compilation

Compile SCSS to CSS:

sass style.scss style.css

Quick SCSS Example

$color: teal;.button {  background-color: $color;  padding: 10px 15px;  border-radius: 5px;  &:hover {    background-color: darken($color, 10%);  }}

Want me to generate a complete SASS project example or show how to integrate SASS with your workflow?