There are many ways to install the sass compiler/transpiler to turn your sass files into vanilla css. This section describes a common way of installing the sass tools, but there are other options.
Install Sass
Depending on your machine's configuration, I recommend one of the three following installation methods.
npm install -g sass
This is a great option if you're already using NodeJS for other projects (like Eleventy).
To use the npm command, you will need to first install Node on your system.
# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# download and install Node.js (you may need to restart the terminal)
nvm install 20
# verifies the right Node.js version is in the environment
node -v # should print `v20.14.0`
# verifies the right NPM version is in the environment
npm -v # should print `10.7.0`
brew install sass/sass/sass
" Homebrew installs the stuff you need that Apple (or your Linux system) didn’t."
To use the brew command, you will need to first install Homebrew.
Jekyll has an interesting way of incorporating Sass content into their build process.
---
# This is Jekyll-specific, empty front matter to trigger processing
---
@use "globals/reset";
html, body {
margin: 0;
padding: 0;
}
The front matter is a marker for the Jekyll build that says, "include me!" Unfortunately, that's not valid sass markup. While it makes Jekyll happy, it really upsets other tools that process sass files, like 3rd-party transpilers and linters.