(click anywhere to close)

[SASS] Compiling

category: Website | course: SASS | difficulty:

Just as CSS, you can write SASS code in any regular text editor. (You can also write it in fancy expensive text editors, don’t worry.) What’s really important to understand, are two things:  the file formats and how to compile.

File Formats

In the early days of SASS, files – not surprisingly – carried the extension .sass. While cool, it had to change when the language changed a lot and became bigger and better.

Nowadays, files that contain SASS code carry the extension .scss

So, all you need to do is create a text file, and change the extension. You can do this in the default text editor of your system, or you can use a text editor made specifically for CSS and all its brothers and sisters. (There are more pre-processing languages, but they are smaller and more specific than SASS.)


Compilation can be done through the command line tool, or by using software.

Command Line

If you only want to compile a file once, use:

sass inputfile.scss outputfile.css

But, as it so often happens, you’re probably making continuous small changes to the stylesheet and want some files to compile automatically. For that, we can watch a file or folder for changes, and if a file is saved with changes, our computer will automatically compile it.

To watch a single file, use

sass --watch inputfile.scss:outputfile.css

To watch all the files within a folder, use

sass --watch inputfolder:outputfolder

You need to keep the command line tool open to keep watching. It will probably tell you that.

If you’re unfamiliar with the command line tool, this might be hard to understand. In the code above, I assume you’ve navigated your command line tool to the directory that contains your SASS files or folders.

If you haven’t, or don’t know how to do that, you can use absolute paths, such as



I personally like the free and open source Koala, but the paid CodeKit and Compass.app are also popular and contain more features. Compiling with software usually amounts to selecting the file, and clicking compile somewhere.

Compilation Options

There are four styles to use for compilation: expanded, nested, compact, and compressed. The second one is selected by default. To override the current compilation settings on a file, use

sass --update somefile.scss --style expanded
sass --update somefile.scss --style nested
sass --update somefile.scss --style compact
sass --update somefile.scss --style compressed

These compilation styles go from large to small. The expanded style gives all properties and selectors their own lines and indents them properly, while the compressed style places everything immediately behind each other. The first one’s easier to read, understand and work with, while the last one’s small and fastest to load.


So, I suggest you use one of the first two when developing, testing, and checking if everything works as expected. I suggest you use one of the last two when deploying to an actual live website.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk