SASS Tutorial For Beginners

Sass, or Syntactically Awesome Style Sheets, is a preprocessor scripting language that compiles to CSS. It adds powerful, dynamic features to CSS, allowing you to create styles in a more organized, modular, and maintainable way.

What about SCSS?

Sass actually comes with two versions: the original Sass and the more popular SCSS. While they both offer the same features, the main difference lies in their syntax.

The Sass version is known as the 'indented syntax.' It does not use curly braces {} or semicolons ; and relies on indentation (similar to Python) to nest and structure styles.

$primary-color: #3498db
$font-stack: Arial, sans-serif

body
  font-family: $font-stack
  color: $primary-color

  h1
    font-size: 2rem
    color: darken($primary-color, 10%)

SCSS, or 'Sassy CSS,' on the other hand, uses the standard CSS syntax with curly braces {} and semicolons ;

$primary-color: #3498db;
$font-stack: Arial, sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;

  h1 {
    font-size: 2rem;
    color: darken($primary-color, 10%);
  }
}

Also, note that SASS files use the .sass extension, while SCSS files use .scss. This difference helps you know which one you're dealing with at a glance.

How To Compile SASS to CSS

Browsers don’t understand SASS code, so they need to be compiled into CSS. To do this, you can use the SASS command-line tool, a build tool, or an extension in your code editor.

Using the SASS Command Line

If you have Node.js installed, you can install SASS globally via npm.

npm install -g sass

Then, in your working directory, you can compile your SASS files to CSS on your command line.

sass input.scss output.css

Here, replace input.scss with the path to your SASS file and output.css with the desired CSS output file path.

Using the VS Code Extension

Some code editors offer extensions to automatically compile SASS to CSS.

For example, you can install the Live Sass Compiler extension on Visual Studio Code.

Once you install the extension, you can easily compile your SASS files by clicking the "Watch SASS" button at the bottom. Sometimes the button may not appear; in this case, remember to try refreshing your editor.

After compiling is complete, you can see the generated CSS files in the CSS folder in your directory.

Features

Here's a breakdown of what Sass offers and how you can use it in web development:

Variables

One of the standout features of SASS is the use of variables. In SASS, you can define variables for colors, fonts, sizes, etc. so that you can easily change values in one place without editing your entire stylesheet.

In SASS, variables are declared with a dollar sign ($) followed by the variable name, and then assigned a value.

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', Arial, sans-serif;

body {
  font-family: $font-stack;
  background-color: $primary-color;
}

Even though CSS also supports variables, SASS variables are still useful for organizing and managing your styles.

Nesting

In SASS, just like in HTML, you can nest CSS selectors. This approach lets you create hierarchically structured selectors for complex layouts, eliminating the need to repeatedly write parent selectors

.nav {
  background-color: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

In addition, when nesting selectors, the & selector (also known as the 'parent selector') is a powerful tool that allows you to reference the parent selector within nested styles.

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;

  &.success {
    background-color: #2ecc71;
  }

  &:hover {
    background-color: darken(#3498db, 10%);
  }

  &--large {
    padding: 40px;
  }
}

You can use the & selector with pseudo-classes and pseudo-elements, to create class modifiers, and for component states and variants.

.card {
  padding: 20px;
  background-color: #f5f5f5;

  &--large {
    padding: 40px;
  }

  &--primary {
    background-color: #3498db;
  }
}

SASS code above compiles into this:

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
}

.button.success {
  background-color: #2ecc71;
}

.button:hover {
  background-color: #2a80b9; 
}

.button--large {
  padding: 40px;
}

Like variables, CSS now also supports nesting. However, the way they handle the parent selector (&) differs slightly. In native CSS nesting, the ampersand symbol that represent the parent selector must appear at the beginning of the nested rule. It cannot be used as flexibly within the selector as in SASS.

.button {
  color: white;

  &--large { /* This will not work in native CSS nesting */
    padding: 20px;
  }

  &.success { /* This will not work either */
    background-color: green;
  }
}

Mixins

Mixins in SASS allow you to define reusable chunks of CSS that you can include throughout your stylesheet. This is especially helpful for repetitive styles like vendor prefixes, button styles, or responsive breakpoints. You can also pass arguments to mixins, making them even more flexible.

@mixin rounded-corners {
  border-radius: 10px;
}

.box {
  @include rounded-corners;
}

@mixin box-style($bg-color, $padding: 15px) {
  background-color: $bg-color;
  padding: $padding;
  border-radius: 5px;
}

.card {
  @include box-style(#3498db, 20px);
}

.alert {
  @include box-style(#e74c3c);
}

Functions

SASS functions allow you to define custom functions that return a value You can use these functions to perform calculations, manipulate colors, or handle other operations that help keep your stylesheets flexible and clean.

@function grid-width($columns, $gutter: 10px) {
  @return ($columns * 100px) + (($columns - 1) * $gutter);
}

.grid-item {
  width: grid-width(3); // Outputs 320px
}

If-Else

In SASS, you can use conditional statements like @if, @else if, and @else to control the flow of your styles based on conditions. This is helpful for applying different styles depending on specific criteria, such as breakpoints, themes, or other design choices.

@mixin button-style($type) {
  padding: 10px 20px;
  border-radius: 5px;

  @if $type == primary {
    background-color: #3498db;
    color: #fff;
  } @else if $type == secondary {
    background-color: #2ecc71;
    color: #fff;
  } @else {
    background-color: #ccc;
    color: #333;
  }
}

.button-primary {
  @include button-style(primary);
}

.button-secondary {
  @include button-style(secondary);
}

Loops

SASS provides powerful looping constructs that allow you to repeat styles or generate multiple classes dynamically. The most commonly used loops in SASS are @for, @each, and @while. These constructs help reduce redundancy and create complex stylesheets more efficiently.

@for Loop

The @for loop iterates over a range of numbers, allowing you to create styles based on a sequence.

$columns: 4;

@for $i from 1 through $columns {
  .column-#{$i} {
    width: 100% / $columns;
  }
}

.column-1 {
  width: 25%;
}

.column-2 {
  width: 25%;
}

.column-3 {
  width: 25%;
}

.column-4 {
  width: 25%;
}

@each Loop

The @each loop iterates over a list or map, which is great for applying styles to multiple items.

$colors: red, green, blue;

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

.bg-red {
  background-color: red;
}

.bg-green {
  background-color: green;
}

.bg-blue {
  background-color: blue;
}

@while Loop

The @while loop continues until a specified condition is false. It is less commonly used but can be handy for certain situations.

$count: 1;

@while $count <= 5 {
  .item-#{$count} {
    width: $count * 20px;
  }
  $count: $count + 1;
}
.item-1 {
  width: 20px;
}

.item-2 {
  width: 40px;
}

.item-3 {
  width: 60px;
}

.item-4 {
  width: 80px;
}

.item-5 {
  width: 100px;
}

Partials

SASS partials are a way to organize your stylesheets into smaller, manageable pieces. By breaking down your styles into partial files, you can make your code more modular and easier to maintain. Partials are typically used for different components or sections of a website, like headers, footers, buttons, and so on.

// _variables.scss
$primary-color: #3498db;
$font-stack: Arial, sans-serif;

// main.scss
@import 'variables';
@import 'mixins';
@import 'buttons';

// You can also use the styles here directly
body {
  font-family: $font-stack;
}

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.