Introduction

This tutorial aims to introduce you to SASS and SCSS, two powerful CSS pre-processors that help in writing clean, easy-to-maintain, and DRY (Don't Repeat Yourself) CSS code. By the end of this tutorial, you will be able to understand the basics of SASS/SCSS, write SASS/SCSS code, and compile it to CSS.

Prerequisites: Basic knowledge of HTML and CSS is required.

Step-by-Step Guide

SASS (Syntactically Awesome Stylesheets) and SCSS (Sassy CSS) are both CSS pre-processors. They allow you to use features that don't exist in CSS yet like variables, nesting, mixins, inheritance, and more.

SASS vs SCSS
- SASS has a loose syntax with white space and no semicolons, the syntax is similar to Python.
- SCSS syntax is similar to CSS. It uses brackets and semicolons.

Installation
To start with SASS/SCSS, you need to have Node.js installed on your machine. Then, install SASS globally by running the following command in your terminal:

npm install -g sass

Compiling
SASS/SCSS files cannot be directly used in a browser. They need to be compiled to CSS. To compile your SCSS file to CSS, use this command:

sass input.scss output.css

Using Variables
In SASS/SCSS, you can use variables to store colors, font stacks, or any CSS value that you want to reuse.

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

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

Code Examples

1. Nesting
SASS/SCSS allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
  }
}

When compiled to CSS, it becomes:

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

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

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

When compiled to CSS, it becomes:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Summary

In this tutorial, we have learned the basics of SASS and SCSS, how to install them, and how to write SASS/SCSS code. We have also covered variables, nesting, and mixins.

For further learning, you can explore other features like inheritance, operators, functions, etc. You can refer to the official SASS documentation (https://sass-lang.com/guide) for more details.

Practice Exercises

1. Create a SCSS file, declare a color variable, and use it to set the color of text and background.
2. Create a mixin for a transition effect and apply it to a class.
3. Use nesting to style a nested list.

Solutions
1.

$color: #ff0000;

body {
  color: $color;
  background: lighten($color, 50%);
}

@mixin transition($property) {
  transition: $property;
}

.button {
  @include transition(all 0.2s ease-in-out);
}

ul {
  list-style: none;

  li {
    margin-bottom: 10px;

    ul {
      padding-left: 20px;
    }
  }
}