Sass Tutorial for Beginners — CSS With Superpowers – ██FR█████ █INTELL███████████

This content originally appeared on Level Up Coding – Medium and was authored by Hayk Simonyan

Sass Tutorial for Beginners — CSS With Superpowers

This article will introduce you to Sass, a CSS preprocessor that extends CSS functionality.

You will learn the benefits of using Sass and how to convert a basic website from CSS to Sass, with practical code examples for each feature.

Why Use Sass?

Sass offers several advantages over CSS:

Easier to maintain: Sass code is more concise and easier to read than plain CSS.
More powerful: Sass provides features that are not available in CSS.

Let’s see these features in action.

How Do Preprocessors Work?

Before writing any Sass code, it’s important to understand how preprocessors like Sass, Less, or Stylus work.

You write your styles using the preprocessor’s syntax, and then a special tool called a compiler transforms that code into regular CSS that browsers can understand.

This compilation process happens before your website goes live, so visitors won’t see any difference in their browsers.

Getting Started with Sass

1. Install Sass

First, you need to download and install Node.js.
Once Node.js is installed, open your terminal and run the following command to install Sass globally npm install -g sass.

2. Create a Sass File

Sass actually offers two different syntax options:

SCSS (Sassy CSS): This syntax is similar to regular CSS, making it easier for beginners to transition. It uses curly braces and semicolons, just like CSS.
Indented Syntax (Sass): This syntax is more concise and uses indentation instead of curly braces to define blocks.

Let’s focus on the SCSS syntax, as it’s more widely used and easier to understand for those who are already familiar with CSS.

If you have a demo project, go in there and create a Sass file (e.g., style.scss), and let’s start converting your CSS into Sass.

3. Compile Sass Code

Now, as your browser cannot interpret Sass (.scss) files directly, you need to compile them into CSS.

Compiling a Single File: Navigate to the directory where your Sass file is located. Then, run the following command:

sass --watch style.scss style.css

This command does two things:

Compiles: It compiles style.scss into style.css.
Watches: It continuously watches style.scss for changes. When you save changes to your Sass file, Sass will recompile it into CSS.

Compiling Multiple Files at Once: You can compile multiple Sass files simultaneously using the following command:

sass --watch **/*.scss **/*.css

This command will watch all .scss files in your project directory and its subdirectories, and compile them into corresponding .css files whenever you make changes.

Sass Features

Nesting

Sass lets you nest your CSS selectors in a way that follows the same visual hierarchy as your HTML.

nav { 
    ul {
        li {
            a { 
                color: blue; 
            }
        }
    }
}

This Sass code will compile to the following CSS:

nav ul li a {
    color: blue;
}

Variables

You can store things like colors, font stacks, or any CSS value in Sass variables:

$primary-color: #007bff; 
body {
    color: $primary-color;
}

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.

For example, you can extract flexbox styles that you use often into a mixin and then reuse it:

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

.container {
    @include flex-center;
}

Partials

A partial is a Sass file named with a leading underscore (like _partial.scss). You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files.

// _header.scss
header { 
    // header styles
}

And then you can use your partial styles by importing them in another file:

// style.scss
@use 'header'; // Import the _header partial

Modules

Modules let you split your Sass code into different files and use the @use rule to load another Sass file as a module.

// _colors.scss
@use 'sass:color';

$primary: #007bff;
$secondary: color.adjust($primary, $lightness: -20%);

// style.scss
@use 'colors' as c;

body {
    background-color: c.$secondary;
}

Functions

You can use functions to create reusable pieces of code in Sass:

@mixin flex-column($flex-direction: column, $justify-content: flex-start, $align-items: stretch, $gap: 0) {
    display: flex;
    flex-direction: $flex-direction;
    justify-content: $justify-content;
    align-items: $align-items;
    gap: $gap;
}

For example, if you’re using a lot of flexbox in your CSS code, you can extract a reusable function like this and then use the flex-column function with the arguments you want in your code without repeating all these styles.

Operators

Operators are pretty simple; you can just use any operator, like +, -, *, math.div(), and %.

.container {
    width: 100% - 30px;
}

Conclusion

As you saw, Sass empowers you to write cleaner, more maintainable, and feature-rich CSS code. By leveraging it, you can streamline your development workflow and create more elegant and efficient stylesheets.

If you want to dive deeper into Sass, you can check out my Free HTML and CSS Course. I cover Sass more extensively there, in addition to HTML, CSS, responsive design, and CSS frameworks.

Sass Tutorial for Beginners — CSS With Superpowers was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

This content originally appeared on Level Up Coding – Medium and was authored by Hayk Simonyan