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.
-
Open Terminal and run:
sudo gem install sass -
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.
- Open Sublime Text and go to Tools -> Command Palette.
- In the command palette, type Package Control and select "Package Control: Install Package".
- In the next input, type Sass and choose it.
- Wait a moment for the package to install. Once installed, you can select Sass in the bottom right corner alongside other formats.
- 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:
-
To compile your
.scssfile into a regular.cssfile, run the following command in Terminal:sass input.scss:output.css -
To avoid running the command repeatedly, enable automatic preprocessing (recompilation) whenever the
.scssfile changes by using:sass --watch input.scss:output.css