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.
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 using Node Package Manager takes three steps:
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.
Next you'll use your new package manager to install Sass by running the following command in the terminal:
$ npm install -g sass
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.
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:
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.
With Homebrew installed, you can now use it to install Sass with the following command:
$ brew install sass/sass/sass
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.