Sass (SCSS) development setup
SCSS or SASS (Syntactically Awesome Style Sheets, written as Sass in the official docs despite being an acronym) is a CSS preprocessor that allows the definition and use of variables, functions, and mixins to make CSS more modular and maintainable.
Installing and running SASS
Assuming you have already set up Node, you can install SASS globally using NPM:
npm install -g sass
npm install -g sass
Tips
The JavaScript implementation the NPM package uses is supposedly slower than Dart Sass on is own. Windows users can use Chocolatey to install Dart Sass globally:
choco install sass
Caveats for Chocolatey + WSL
Using the Chocolatey version of can cause some permission and file path headaches when going via WSL and trying to use glob patterns or
the watcher though (even with an alias in your Bash config).
If using PhpStorm, using a file watcher gets around this.
To compile a single file and watch for changes (example):
sass global.scss:global.css --watch
sass global.scss:global.css --watch
To watch all files in a directory using PhpStorm, you can use a file watcher.
Development Approach
Please see the HTML, CSS and SCSS page for more information on the approach to using SCSS in this project.