How to use Sass

When you get started in web development, like me, you look at other people's web projects and at some point you must have noticed an assets/ folder with a sass/ subfolder in it. That folder contains all the Sass files. You must have also noticed a css/ subfolder, containing one giant CSS file. And also like me, you must've been like "OK, well how did the developers manage to put all their CSS in this file?"

The answer is: they don't. They compile down the whole Sass folder into a CSS file using a command line tool. Which brings me to what Sass is. But first, here's how you actually use Sass.

Quick answers

To install Sass (requires Node.js and npm)

npm install -g sass

To compile a single Sass file to CSS:

sass file.sass file.css

To compile an entire directory of Sass files to a CSS file in its own folder:

sass path/to/sass/folder:path/to/result/css/folder

The --watch option to sass will continuously monitor the input files and compile them if they have changed.

What is Sass?

Sass is a preprocessor for CSS. You can write normal CSS in it while also gaining access to individual variables, and reusable CSS blocks called mixins, made with @mixin. This singlehandedly is the biggest advantage of using a CSS preprocessor over writing the CSS file directly. Instead of typing the same blocks in different places it is now possible to write them once, and include them into CSS using @include.

An @ with words after them, like @mixin and @include, is called a rule.

Variables are declared and used with a dollar sign in front of them like this:

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

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

Blocks of CSS aren't stored in variables, they are stored in mixins like so:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

The box class now has all the properties listed in the transform($property) mixin.

In Sass, you can nest CSS elements in other CSS elements using brackets. It's good for organizing your files.

And to put your Sass in different files and include them in your other Sass files, you can use the @use rule: @use 'filename-without-extension';. These files that are being included are called modules, and have a leading underscore _ in their filenames. The leading underscore is not included in the @use rule.

Whole directories of Sass files can be included using @import.

/*
    Sass has support for comments.
*/

// Importing a path
@import 'some/path';

// Importing a CSS file
@import 'font-awesome.min.css';

// Import an external resource, such as a font
@import url('https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600');

And we're done

If you see any incorrect information here, please let me know so I can amend it. Thanks.

Image by garageband from Pixabay

Comments

[Ali Sherief]

Not exactly everyone. People new to web development know next to nothing about css, let alone sass, so I just wanted to clarify what that was all about in the article, and they were my intended audience for this post.

[Anzelika]

Just what I needed! Thanks for putting this down in an easily digestible way!