Have you ever needed to replace the same color in 50 places throughout a gigantic CSS file?
It sure would be nice if you could make that color a variable and change it in one place.
Functions and mixins?
Those would be cool too.
I have good news — Sass has ’em all. It eliminates many of the frustrations inherent with CSS, and, some might say it makes writing style sheets fun. So, what are you waiting for‽
First, if you’re confused by the many Sass versions and implementations, a little history may help. Sass was originally written in Ruby. Though Ruby Sass is still available, it has been deprecated. This means it will no longer receive new features and will lose support entirely on March, 26 2019. If you’re installing Sass for the first time, you want the primary implementation, Dart Sass. (And if you need to install Sass on MacOS/OSX, go here.)
Installing Chocolatey
You can install Dart Sass without any external dependencies. However, I’m going to show you installation through the Windows package manager, Chocolatey. A package manager allows you to install, update and remove software packages easily. For example, if a new version of Dart Sass is released, you can update the version on your computer with a single command. This is much nicer than manually tracking and managing each software package you install.
To install Chocolatey, your computer must first meet a few requirements. You should be running Windows 7 or newer. You should also have PowerShell version 2 or greater — it’s included in Windows 7 and later editions by default — and .NET Framework 4+. You can get the .NET Framework from Microsoft if you need it. Once you’re ready:
Open an Administrator version of the Command Prompt. Click on the Windows or Start menu and type “cmd”. This will list the Command Prompt.
Right click on the Command Prompt option and select “Run as Administrator” from the menu.
You will likely see a menu that asks, “Do you want to allow this app to make changes to your computer?” Click Yes.
With the Command Prompt open, copy and paste the following command and press Enter:
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
You should see the Command Prompt fill with text as Chocolatey is downloaded and installed. Chocolatey may print warnings, including a message that you will likely need to restart Command Prompt after installation. The final message should be something like:
Ensuring chocolatey commands are on the path
Ensuring chocolatey.nupkg is in the lib folder
Congratulations, you now have Chocolatey installed. Close your Command Prompt window and reopen it, again, as an Administrator.
Installing Sass
With the Administrator Command Prompt open, copy and paste the following command and press the Enter key:
choco install sass
Your Command Prompt will again fill with text as Sass is installed. It may ask for permission to run scripts and install packages. Select yes by typing “Y” and then pressing the Enter key. I had to type Y twice during installation. The installation may take more time than expected, and the Command Prompt may look frozen. Be patient; it’s working.
The final message should say something like:
Chocolatey installed 2/2 packages
See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).
Once Chocolatey has finished installing Sass, you can make sure Sass is installed by typing:
choco list -lo
This should output a list of Chocolatey packages, which will include Sass and its version number. At the time of writing, it shows me Sass version 1.11.0.
Congratulations, you’ve installed Sass. You’re now ready to take advantage of all the features that make Sass so lovely to write. We have great Sass content here on Treehouse that will take you from the basics to advanced Sass wizardry.
Interested in a guided curriculum that leads you from beginner to job-ready developer? Check out our Front End Web Developer Techdegree.
Free 7-day Techdegree Trial