How to Set Up SASS on Windows
Tags:

Writing and managing CSS has become much more enjoyable with the invention of variou preprocessors and extensions. One of the most popular is SASS. SASS ("Syntactically Awesome Style Sheets") has its own syntax and features which compile down to regular old CSS. There are various SASS compilers such as Ruby SASS, libsass, and dart-sass. In this article, I will explain how to get up and running with dart-sass on Windows.

1. Go to https://github.com/sass/dart-sass/releases and download the zip file for the latest version of dart-sass

2. Extract the .zip file and move it save it somewhere

The root folder will be called "dart-sass" and will have a structure similar to this:


    -- dart-sass
    ------ dart-sass.bat
    ------ sass.bat
    ---------- dart.exe
    ---------- DART_LICENSE
    ---------- sass.dart.snapshot
    ---------- SASS_LICENSE
    

3. Add dart-sass to your $PATH

For example, if you moved the dart-sass folder to "Program Files", then you should append something like this to your PATH: C:\Program Files\dart-sass-1.17.0-windows-x64\dart-sass. See https://katiek2.github.io/path-doc for help on setting the Windows $PATH.

4. Ensure SASS is installed correctly

If you had a command prompt open before you added dart-sass to your PATH, close it and open a new one. If not, open a command prompt and type sass -version. You should see the version of SASS you just installed, e.g. Sass 3.5.5 (Bleeding Edge).

5. (Optional) Compile Your First SASS File

SASS works by transforming a .scss file in to a .css file. (Confusingly, the SASS file extension is .scss. .sass is considered to be the "old" type, and .scss is the current standard. See https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass).

The syntax for compiling a .scss file into a .css is:

sass my-file.scss my-file.css
where my-file.scss is the input and my-file.css is the generated CSS file.