Setup for Sass Training

• Operating system:
  • PC: Windows 10 or later 
  • Mac: OS X Mountain Lion (version 10.8) or later
• Browser: The latest version of Chrome, Firefox, Edge, or Safari.
• Visual Studio Code (instructions below)
• Sass (instructions below)

Creating the Webucator Folder

The first step to setting up for your course package is to create the folder in which you will store your class files: Create a new folder named Webucator wherever you want, but make sure you remember where it is.

Getting the Sass Class Files

1. Download the Sass class files from the bottom of this page.
2. Unzip the class files into the Webucator folder. This will create a folder called ClassFiles. Change the name of the folder to Sass. The structure should look like this:
   

Visual Studio Code

(You can use any editor that you like; however, if you don't have a preference, we recommend Visual Studio Code.)

Instructions assuming you use Visual Studio Code as your code editor. 

1. Download Visual Studio Code for your operating system.
2. Install Visual Studio Code.
   • Instructions for Windows.
   • Instructions for Mac.
3. Open Visual Studio Code.
4. From the File menu, select Save Workspace As…
   
5. Save the workspace as Webucator within the Webucator folder you created earlier:
   
6. If Visual Studio Code's Explorer panel isn't open, open it by clicking the files icon on the upper left (circled below in orange). Then click the Add Folder button.
7. Select the Sass folder and click Add:
   
8. You will now see the Sass folder in Visual Studio Code's Explorer panel:
   
9. Install the Open HTML in Default Browser extension to make it easy to open HTML files in your browser. Note that there are many extensions for accomplishing this same thing. We recommend starting with this one, but you are welcome to try other as well. You can search the Visual Studio Market Place and try any of the many free extensions there.

Install Sass

There are many ways to install Sass, but the easiest way is to use Node. If you do not have (or do not know if you have) Node installed, visit one of the following:

• Install Node on Mac
• Install Node on Windows

Once you have Node installed, install Sass:

1. In Visual Studio Code, select New Terminal from the Terminal menu:
2. In the terminal, run npm install -g sass
   
3. You can then check what version of Sass you have by running sass --version
   

Congratulations! You are ready to start the course.