The more projects you work on as a developer the larger and more complex they seem to become. The narrative becomes the same with stylesheets as the project grows, the CSS gets harder to maintain efficiently. That is where SASS can help.

SASS is a stylesheet language that extends the capabilities of CSS. It makes the job of developing a lot easier by adding advanced functionality and time-saving features like variables, reusable blocks and partials that make your styles modular. The modular approach splits your SASS into separate files which can make it easier to find and edit your styles without creating extra HTTP requests, which can impact on the speed of your website. Browsers do not understand the SASS syntax so a stylesheet written in SASS needs to be translated or compiled into CSS before the browser can read it. A pre-processor takes source code written in one type of language and returns it, allowing it to be understood by other programs.

SASS comes with a built-in pre-processor. To find out how to install it into your project visit: sass-lang.com/install.

Compiling SASS to CSS

We know the SASS pre-processor takes a SASS file and translates that into a CSS file which the browser can understand and use, but how do we make that happen? One of the quickest ways is by using the terminal or command-line tool. SASS has a series of commands that tells the compiler which files to process. The SASS command accepts many bits of information but at the very least you need to provide it with the path to the input and output files. See the example command in the terminal view below.

This command references a SASS file (input.scss) that is processed to our output file (ouput.css). If you haven’t created a CSS file at that point, it’s okay, the pre-processor handles that for you by generating the CSS file. The output file generated is the file you should include in your project. You should never work directly on the generated file as any changes would be lost if you run the command again. This command also generates a few other files. The output.css.map file will make it easier to debug style in the browser using a tool live Chrome DevTools. The sass-cache folder will speed up the compiling by caching parts of the sass code. If you had to run this command over and over it would be a pain so luckily SASS has us covered with a feature called a watcher.

The watcher constantly detects changes made in your SASS files and recompiles the output file with the latest changes. To enable the watcher you pass the watch option to the SASS command (e.g. sass –watch input.scss:output.css ).

After the command runs successfully you will see the message >>> Sass is watching for changes. You can stop this running anytime by pressing Ctrl+C. Any time you add new CSS or make a change to your SASS file save your changes and you should see the console output ‘Change Detected’. This means your SASS has been successfully recompiled. So far, this only works with one file but developers often work with multiple SASS files to help keep things organised.

Multiple Sass Files

At any one time you could have multiple SASS files for layouts styles, typography styles and another for base elements styling. Normally you would try to keep the number of files to a minimum, meaning fewer requests to the server to avoid slowing the website down. SASS will let you compile individual files into a single compact CSS file to help prevent this. To show an example of this working I’ve created two separate directories, one directory will hold the SCSS files and the other the final CSS output.

The watch multiple files command is very similar to the watch command we ran earlier (sass –watch scss:css). The difference here is that we are instructing SASS to watch the SCSS directory for any changes on the SCSS files and output the changes to the CSS directory. Just like the single file command if you didn’t create the CSS folder SASS will auto-generate the new folder & files.

Sass Variables

Writing vanilla CSS can be repetitive and maintaining it can be increasingly difficult the more the project grows. How often have you had to change a colour or a font because a client has changed their mind? SASS borrows certain concepts and features from programming languages to make your style less repetitive, faster to write and easier to maintain. Variables are one of the most important concepts in programming. They provide a way of storing and keeping track of information. When you use variables in SASS you store values in that variable, which then referenced throughout the site. For example, if you have a colour that is re-used for a heading you can declare a variable for that colour and reference that variable anywhere you want to use that same colour.

/* Variables ------------------------------------------------- */

$color-primary: #343434;

/* BASE ------------------------------------------------- */

* {
    box-sizing: border-box;
}

body {
    color: $color-primary;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    margin: 0;
}

To keep things neat and tidy I recommend declaring variables at the start of your SCSS file. In our example, we’ve created a $color-primary variable. The syntax for the variable is like any CSS selector but, it must start with $ sign and no space. This variable will be the main colour in our project hence the name. You can name it anything you want but it’s helpful to use a name that clearly describes the purpose of the variable. To apply a variable all you need to do is reference its name in any CSS property. When the SCSS gets to run in our pre-processor it turns that variable name into our value so the variable name itself will never appear in the CSS output. Variables aren’t just for colours, you can create a variable with any value making the repetitive nature of CSS easier to manage.

Wrapping Up

We’ve covered a lot in this post, we know that SASS is an extension of CSS that gives your style sheets more functionality. The tool itself is a pre-processor that translates SASS or SCSS syntax into plain CSS. We’ve learned to use the SASS watch command for compiling your SASS to CSS and how variables work in SASS. But this is just a peak into SASS, there is much more to delve into like nested selectors, mixins, partials and loops. You can see how this all works by visiting sass-lang.com/documentation or keeping an eye out for my next blog post.