Manual compilation of SASS files

By the manual compilation the code is compiled “by hand”. That means that every time you make a change in the SASS file, you have to compile it before you see some result in the browser (or in the CSS). This method is not very used, since it demands additional efforts, which takes additional time. Anyway there may be cases in which the manual compilation is preferred.

Step 1)
Create a new file, put some SASS code in it and save it with extension “.scss”. I`ve used the name “style.scss”. I used the following code, but you can do it with every SASS code you like:

1. $blue: #0000ff;
2. $margin: 20px;
3.
4. .navigation {
5. border-color: $blue;
6. }
7.
8. .border {
9. padding: $margin / 2;
10. margin: $margin / 2;
11. border-color: $blue;
12. }

Step 2)
Open the command prompt and navigate to the directory in which you saved the SASS file you just created.

Step 3)
After you get in the right folder type “sass style.scss style.css”. That is the minimal thing you need to compile a SASS file. Actually we are “saying” to the compiler: “take style.scss, compile the code in it and return it as css file, which is actually style.css”.

Step 4)
Go to the folder you saved the SASS file. There you`ll also find the newly created style.css file. There is also another folder called “.sass-cache”. SASS automatically creates that folder to save the cache history of the compiled files. The compiler uses that folder by every compilation in order to make the process faster. You can feel that especially if you work with big collections of SASS files.

Step 5)
Look at the result in the CSS file. You`ll find a valid and well formatted CSS code.
That is actually the whole procedure. A big disadvantage of manual compilation is that you can compile only one file at a time. For example if you have two distinct files, you`ll have to redo the command twice.