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.