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.
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
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.
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.
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.