Onjsdev

Share


SASS Tutorial


By onjsdev

Jan 12th, 2024

While developing web projects, especially large web projects, managing CSS style files can be quite challenging. This is where SASS (Syntactically Awesome Stylesheets) comes into play. SASS is a preprocessing language built on CSS. Thanks to SASS, it becomes possible to create style files in a more organized, modular and maintainable way.

In this article, we will take a deep dive into SASS and cover topics such as its syntax and how to compile it to CSS.

What is SASS?

Essentially, SASS is a CSS preprocessor language written in the Ruby programming language. SASS offers us additional features that are not available in CSS. For example, while we cannot use loops or conditional statements when writing CSS, we can use these expressions when writing SASS. The thing is, in web development SASS can be thought of as an intermediate language that makes creating style files easier and more flexible.

What about SCSS?

If you have some research on SASS, you may also have heard of SCSS. SCSS and SASS are basically the same language. The main difference between them is their syntax. SCSS has a more traditional CSS-like syntax, while SASS uses a syntax based on indentations. These two different syntaxes are written in files with .sass and .scss extensions. Since SCSS is more similar to CSS, we can say that it is more popular among developers. We will give our examples using SCSS syntax.

How to Use SASS?

Browsers cannot understand SASS files directly, so a compiler is needed to convert SASS codes into browser-friendly CSS codes. You can use command line tools or SASS compilers with a graphical interface to convert SASS files to CSS files. You can compile SASS codes to CSS codes in many ways.

Compiling with SASS Package

First of all, Node.js and npm must be installed on your computer to download and run the Sass package. You can download and install Node.js and npm from nodejs.org.

You can then install Sass via npm using the following command from terminal or command prompt:

npm install -g sass

This command installs Sass globally on your computer.

Now, create a project in your code editor and create the Sass files you want to work with in the project folder (for example, styles.scss). Then open terminal and compile the Sass files to CSS using the following command in your project folder:

sass input.scss output.css

In the above command, input.scss will be compiled and converted into a CSS file called output.css.

Compiling with VS-Code Plugin

You can install a plug-in such as "Live Sass Compiler" to manage your Sass files more easily on VSCode. For this:

  • In your VSCode, click on the Extensions icon from the left-hand menu.
  • Type "Live Sass Compiler" in the search bar and install the relevant plugin.

You can compile your Sass files by clicking the “Watch SASS” button below your editor.

Features of SASS

After a brief introduction to the SASS language, let's look at the general features that SASS offers us.

Variables

SASS allows you to store values such as colors, fonts, sizes, and other style attributes using variables. This, in addition to using the same value multiple times, makes your style more consistent and manageable.

$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

In case you decide to change the main color used, all you have to do is update the variable definition at the beginning of your style sheet. This allows you to easily change your app design.

Nesting

SASS offers the ability to nest CSS rules. This can help you create a more organized and HTML-like hierarchical structure.

nav {
  background-color: #333;

  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

Partials

SASS allows splitting style files into chunks. These parts are SASS files that contain styles for a specific section of your website. For example, you can create different scss files for the header and footer of your site. These partial files start with the _ (underscore) character and are passed into the main scss file.

For example, you can design the navigation section of your website as follows:

// _header.scss

header {
  background-color: #FFFFFF;
  padding: 20px;
}

nav {
  ul {
    li {
      display: inline-block;
      margin-right: 10px;
    }

    a {
      color: #333333;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

You can then import this file into your main SASS file as follows:

// styles.scss (Main File)
@import "header";

// rest of your stylesheet

Mixins

Mixins allow you to reuse and share style patterns:

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

.container {
  @include flex-center;
}

Functions

Functions in SASS allow you to create reusable pieces of code and dynamically apply them to your style sheets. Using them, you can define custom logic in your CSS code, perform calculations, and change values.

@function px-to-em($px, $base-font-size: 16px) {
  @return ($px / $base-font-size) * 1em;
}
h1 {
  font-size: px-to-em(32px); /* 2em */
}

Once you define a function, you can use it just like any other CSS property or value. We used it to set the font size in em of our h1 tag.

If-Else

You can use @if, @else, and @else if directives to create conditional statements with SASS. These directives work similarly to if-else constructs in traditional programming languages.

You can see the general structure below:

@if condition {
} @else if other_condition {
} @else {
}

For example,

$bg: red;

div {
  @if $bg == red {
    background-color: $bg;
  } @else {
    background-color: blue;
  }
}

In this example, when the $bg variable is equal to red, the div elements will be assigned a red background color.

Loops

You can manage repetitive code more effectively by using loops in SCSS. There are three types of loops in SCSS: @for, @each and @while

For

The @for loop is used to iterate over a specific range or list.

@for $i from 1 through 5 {
  .item-#{$i} {
    width: 20px * $i;
  }
}

In the example above, five different classes will be created: .item-1, .item-2, .item-3, .item-4 and .item-5, and the width of each will be 20px, 40px, 60px, 80px and 100px respectively.

Each

The @each loop is used to iterate through a SASS list.

For example;

$colors: red, blue, green, yellow, orange;

@each $color in $colors {
  .color-div-#{$color} {
    background-color: $color;
  }
}

In the example above, a class will be created for each color in the $colors list and the background color will be set to that color. For example .color-div-red, .color-div-blue, .color-div-green etc. classes will be created.

While

While loop is a control flow expression commonly used in programming to repeat a given block of code until a certain condition is no longer true. In the context of SCSS, while loops allow us to execute a group of CSS rules over and over again.

$counter: 1;

@while $counter <= 5 {
  .box-#{$counter} {
    width: 50px * $counter;
  }
  $counter: $counter + 1;
}

In this example, the SCSS While Loop creates five CSS rules from .box-1 to .box-5, each with a different width, increasing by 50 pixels with each iteration.

Conclusion

SASS provides a powerful set of tools to enhance your CSS workflow. By incorporating variables, nesting, mixins, and more, you can write cleaner, more maintainable stylesheets

Thank you for reading.