Sass Introduction

What You’ll Learn

This page is a self-contained introduction to Sass—a CSS preprocessor that helps you write cleaner, reusable stylesheets. You will understand what Sass adds to CSS and see the core features with examples.

👋 Introduction

Sass (Syntactically Awesome Style Sheets) is a powerful preprocessor scripting language that extends CSS (Cascading Style Sheets). By using Sass, you can write more maintainable, reusable, and flexible stylesheets.

Sass adds features such as variables, nested rules, mixins, functions, and inheritance, which streamline and enhance your CSS workflow. You author SCSS, compile once, and ship plain CSS to the browser.

🤔 What is Sass?

Sass is a CSS preprocessor, meaning it processes your Sass/SCSS files and outputs standard CSS files that web pages consume. This lets you use a more expressive syntax and advanced features while browsers still receive valid CSS.

The most common dialect today is SCSS (.scss), which looks almost like CSS with extra capabilities. The original indented Sass syntax (.sass) uses indentation instead of braces—less common in new projects.

🔑 Key Features of Sass

• Variables — store reusable values (colors, fonts, spacing) with $
• Nesting — nest selectors to mirror HTML structure (use with care)
• Partials and import — split CSS into smaller, manageable files
• Mixins — reusable blocks of declarations you include with @include
• Inheritance — share properties between selectors with @extend
• Operators — perform math on numbers, colors, and strings
• Functions — built-in color, string, and map helpers

✅ Why Use Sass?

Sass offers numerous benefits that make it a preferred choice for many developers:

• DRY principle — reuse snippets instead of copying the same declarations everywhere
• Maintainability — change a variable once and update every component that references it
• Organization — split styles into partials: variables, typography, layout, components
• Advanced features — mixins, loops, and conditionals beyond plain CSS (in Sass)
• Community and ecosystem — extensive docs, Bootstrap’s Sass source, and framework support

🧱 Basic Structure of a Sass File

Sass files come in two syntaxes: the older indented syntax (.sass) and the newer SCSS syntax (.scss). SCSS is more commonly used because it is fully compatible with CSS—any valid CSS file is valid SCSS.

Example of SCSS syntax

$primary-color: #333;

body {
  font: 100% Helvetica, sans-serif;
  color: $primary-color;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Compile with sass styles.scss styles.css after installing Dart Sass.

📊 Variables in Sass

Variables in Sass start with a $ symbol and store values you reuse throughout your stylesheet—brand colors, font stacks, breakpoints, and spacing scales.

Example

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

🔀 Nesting

Nesting lets you nest CSS selectors in a way that follows the same visual hierarchy as your HTML. It reduces repetition but can produce overly specific selectors if overused.

Example

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

📥 Partials and Import

Partials are Sass files meant to be imported into other files. Name them with a leading underscore (e.g. _variables.scss). Modern Sass prefers @use for namespacing; @import still appears in many tutorials and legacy codebases.

Example

// _variables.scss
$primary-color: #333;
$secondary-color: #666;

// styles.scss
@use 'variables' as vars;

body {
  color: vars.$primary-color;
}

h1 {
  color: vars.$secondary-color;
}

The older @import 'variables'; syntax works but is deprecated in favor of @use.

🌀 Mixins

Mixins let you create reusable chunks of CSS. Pass arguments to make them flexible—ideal for vendor-prefix bundles, media-query breakpoints, or flex centering patterns.

Example

@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

.box {
  border-radius: 10px;
}

🧬 Inheritance

Inheritance allows one selector to inherit styles from another using the @extend directive. Prefer mixins when you need parameterized styles; use @extend sparingly to avoid bloated selectors.

Example

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success { @extend .message; border-color: #3d9970; }
.error   { @extend .message; border-color: #ff4136; }
.warning { @extend .message; border-color: #ff851b; }

➕ Operators

Sass supports math operators for calculations, making fluid layouts and grid math easier to read in source files.

Example

.container {
  width: 100%;
}

.content {
  width: 600px / 960px * 100%;
}

.container {
  width: 100%;
}
.content {
  width: 62.5%;
}

Examples Gallery

Five compact SCSS snippets. Compile each with Dart Sass and link the resulting .css file in your HTML.

$brand: #2563eb;
$text: #1e293b;

body {
  color: $text;
  background: #f8fafc;
}

a { color: $brand; }

.card {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;

  h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
  }

  p { margin: 0; color: #64748b; }
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

%alert-base {
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

.info {
  @extend %alert-base;
  background: #dbeafe;
}

$columns: 12;
$span: 4;

.col {
  width: ($span / $columns) * 100%;
}

.col {
  width: 33.3333333333%;
}

🎉 Conclusion

Sass is a robust tool that enhances CSS by adding features that help you write cleaner, more efficient, and more manageable stylesheets. By incorporating Sass into your workflow, you can streamline CSS development and maintain a more organized codebase.

• Sass/SCSS is a preprocessor—browsers still need compiled CSS.
• Variables, nesting, partials, mixins, and operators reduce repetition.
• Prefer @use and shallow nesting in modern projects.
• Next: follow the Sass Installation guide and compile your first file.

💡 Best Practices