I spent some time looking for articles on how to set up Sass, the CSS preprocessor on my Macbook Pro. It had been a while since my last use of the pre-compiler and I wanted to get back to using it for a new project I’m working on with my company.
The issue is that I thought the process would be seamless on an ARM (M1 chip), as it was on an Intel architecture. Turns out I was slightly wrong, or probably not smart enough to just “get it.” So, I decided that I would write this article as a reference for the future and for any else who may have come across this issue in their own experiences. With that out of the way, let’s move on.
The Fast Route: Use Homebrew
Now some or many of you who’ve used MacBooks or Linux systems before may know very well about Homebrew. But for the uninformed, Homebrew is a package manager that allows users to install packages (hence the name) that weren’t provided initially by MacOS (or Linux). The goal of it is to make it easy for anyone to run a few commands and get going. The method I’m going to show you involves installing Xcode, which comes out of the box with homebrew. It should be fairly easy.
Open a terminal window and run the following command:
xcode-select --install
A popup window will show and run through the choices to install the application. Once the application is installed we’re next going to run the following command, this will install homebrew by setting permissions:
chmod +x install.sh
./install.sh
You’ll be prompted to enter your account password. This is the password you use when you sign in first the time into your computer. Then hit enter and proceed to let the program install. After the installation is done, we’ll want to add homebrew to our path, to do so we can run the following in our terminal:
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/your_account_name/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
You now have homebrew on your system, we can then run the following command to get Sass:
brew install sass/sass/sass
Let’s run a test. in your terminal lets run these commands and see if sass works for us:
sass --version
cd desktop
mkdir sass-test
cd sass-test
touch index.scss
sass --watch index.scss index.css
If you get back in the terminal, something like: “Compiled index.scss to output.css” sass is watching for changes. You have completed the installation of Sass and can make changes on the fly