Lesson Thursday

To install Sass, we use something called a package manager. This is a tool that helps easily download, install, and update other tools (like Sass) that help us develop websites and applications. They allow us to easily download and install tools directly through the command line, too!

We'll learn a lot more about package managers in week three of this course when we cover concepts of modern web development and development environments. But for now we'll cover just enough to get Sass successfully installed on our personal machines.

Installing Sass

There are two primary manners we recommend for installing Sass:

  • Recommended for Windows and Linux: Using a package manager called Node Package Manager (usually simply referred to as npm) to locate, download, and install Sass for us.

  • Recommended for Mac: Using a package manager called Homebrew to locate, download, and install it for us. This is recommended for OSX machines.

You can find quick reference instructions for each approach below:


Installing Sass with NPM (Windows and Linux)

Installing Sass using Node Package Manager takes three steps:

  1. Install Node.js, which includes the Node Package Manager (npm).
  2. Use npm to install Sass.
  3. Confirm the installation is successful.

1. Installing Node.js and npm

npm is part of a piece of software called Node.js. So to acquire it you must first install Node.js. It's already installed on Epicodus machines, but to install it on your own system, visit the Node website and download and install the installer for your operating system.

Then, confirm npm is in place by running $ npm -v to check its version:

$ npm -v
5.6.0

Your version number may not match the one listed here. That's alright. Receiving any version number is confirmation the $ npm command was successfully recognized, and the package manager is therefore installed.

If you do not receive a version number try exiting out of your terminal program, ensuring the program is no longer running (some terminal programs may continue running after closing the window), restarting it, and attempting the command again.

2. Installing Sass Using npm

Next you'll use your new package manager to install Sass by running the following command in the terminal:

$ npm install -g sass

3. Confirm the Installation

You should then be able to run the command $ sass --help in the terminal and receive a list of supported commands, like the one seen below. This confirms your machine recognizes the command, and Sass has therefore been successfully installed!

Usage: sass input [output]

━━━ Input and Output ━━━━━━━━━━━━━━━━━━━
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=         A path to use when resolving imports.
                               May be passed multiple times.

-s, --style=             Output style.
                               [expanded (default), compressed]

━━━ Source Maps ━━━━━━━━━━━━━━━━━━━━━━━━
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)

    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]

    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

━━━ Other ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-c, --[no-]color               Whether to emit terminal colors.
-q, --[no-]quiet               Don't print warnings.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.

Additional Note on Installing Sass via npm

But do keep in mind that the official Sass documentation gives the following heads-up about installing with npm:

...note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it'll be easy to swap in another implementation later if you need a bit more speed!

The JavaScript implementation should work fine for our purposes. But if you later experience any issues, you can revisit Sass's installation instructions and select a different method at any time.


Installing Sass using Homebrew, another type of package manager specific to OSX machines, also requires only three steps:

  1. Install Homebrew, if it is not already included on your machine by default.
  2. Use Homebrew to install Sass.
  3. Confirm the installation is successful.

1. Install Homebrew

First off, check whether your Mac already has Homebrew installed by executing the following command in the terminal:

$ brew commands

This command tells Homebrew to give us a list of all available commands. If you receive a response that looks something like this...

Built-in commands
--cache         commands        install         prune           uninstall
--cellar        config          leaves          readall         unlink
--env           deps            link            reinstall       unpack
--prefix        desc            list            search          unpin
--repository    diy             log             sh              untap
--version       doctor          migrate         style           update
analytics       fetch           missing         switch          update-report
cask            gist-logs       options         tap             update-reset
cat             help            outdated        tap-info        upgrade
cleanup         home            pin             tap-pin         uses
command         info            postinstall     tap-unpin       vendor-install

Built-in developer commands
audit               formula             prof                test
bottle              irb                 pull                tests
bump-formula-pr     linkage             release-notes       update-test
create              man                 ruby
edit                mirror              tap-new

External commands
aspell-dictionaries                      postgresql-upgrade-database

...It means Homebrew is already installed on your machine!

If you do not receive a response like this, it means you do not have Homebrew installed. Install it now with this command:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Also, ensure Homebrew packages are run before the system versions of the same (which may be dated or not what we want) by executing the following:

$ echo 'export PATH=/usr/local/bin:$PATH' >> ~/.bash_profile

Then, confirm your installation is successful by once again running the following command:

$ brew commands

You should receive a response that looks something like the response depicted below. This confirms that Homebrew recognized your command, and is therefore successfully installed.

Built-in commands
--cache         commands        install         prune           uninstall
--cellar        config          leaves          readall         unlink
--env           deps            link            reinstall       unpack
--prefix        desc            list            search          unpin
--repository    diy             log             sh              untap
--version       doctor          migrate         style           update
analytics       fetch           missing         switch          update-report
cask            gist-logs       options         tap             update-reset
cat             help            outdated        tap-info        upgrade
cleanup         home            pin             tap-pin         uses
command         info            postinstall     tap-unpin       vendor-install

Built-in developer commands
audit               formula             prof                test
bottle              irb                 pull                tests
bump-formula-pr     linkage             release-notes       update-test
create              man                 ruby
edit                mirror              tap-new

External commands
aspell-dictionaries                      postgresql-upgrade-database

If you do not receive the anticipated response try exiting out of your terminal program, ensuring the program is no longer running (some terminal programs may continue running after closing the window), restarting it, and attempting the command again.

2. Installing Sass using Homebrew

With Homebrew installed, you can now use it to install Sass with the following command:

$ brew install sass/sass/sass

3. Confirmation

After following instructions for Homebrew-based installation above, you should be able to run the command $ sass --help in the terminal, and receive a list of supported commands, as seen below. This confirms your machine recognizes the command, and Sass has therefore been successfully installed!

Usage: sass input [output]

━━━ Input and Output ━━━━━━━━━━━━━━━━━━━
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=         A path to use when resolving imports.
                               May be passed multiple times.

-s, --style=             Output style.
                               [expanded (default), compressed]

━━━ Source Maps ━━━━━━━━━━━━━━━━━━━━━━━━
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)

    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]

    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

━━━ Other ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-c, --[no-]color               Whether to emit terminal colors.
-q, --[no-]quiet               Don't print warnings.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.

Lesson 35 of 36
Last updated more than 3 months ago.