How to install Sass (SCSS) on Mac and compile to CSS

How to install Sass (SCSS) on Mac and compile to CSS

Before we begin, let's clarify what Sass is. The abbreviation SASS stands for Syntactically Awesome Style Sheets. Installing Sass or SCSS is fairly simple – let's go through it step by step.

How to install Sass (SCSS) on Mac

To install Sass (which will process all SCSS files) on a Mac, first install the gem for Sass.

  1. Open Terminal and run:

    sudo gem install sass
    
  2. Enter your sudo password and watch the gem install.

How to install Sass (SCSS) in Sublime Text

To ensure that the Sass and SCSS syntax is correctly recognized in Sublime Text, you need to install the Sass package.

  1. Open Sublime Text and go to Tools -> Command Palette.
  2. In the command palette, type Package Control and select "Package Control: Install Package".
  3. In the next input, type Sass and choose it.
  4. Wait a moment for the package to install. Once installed, you can select Sass in the bottom right corner alongside other formats.
  5. To have all future SCSS files automatically opened with Sass syntax, open a new SCSS file, then go to View -> Syntax -> Open all with current extension as... -> Sass.

How to recompile Sass (SCSS) to CSS. Converting SCSS to CSS

To preprocess Sass (SCSS) to CSS from the terminal:

  1. To compile your .scss file into a regular .css file, run the following command in Terminal:

    sass input.scss:output.css
    
  2. To avoid running the command repeatedly, enable automatic preprocessing (recompilation) whenever the .scss file changes by using:

    sass --watch input.scss:output.css