SASS and SCSS Tutorial Lab 1
Dave Moran
LearnToProgram.TV
In this lab, we will be going over how to create a SASS project after you’ve installed the
necessary tools.
1. Create a new folder on your desktop. Inside of this folder, make sure you have the
following files:
a. Index.html
b. style.css
2. Open up your text editor of choice. In this course I will be using Visual Studio Code
(https://code.visualstudio.com/) but you can use any text editor.
3. Open the folder you created inside of your text editor. You should be able to edit the
html and css inside of your text editor
Finished Lab Example:
4. Create a new file called ‘style.scss’ and copy and paste the styles from ‘style.css’ into
‘style.scss’.
5. Open up your terminal/command prompt. Navigate to the direct path of the folder.
a. An easy way to do this in both MacOS and Windows is to open up your terminal
and type in “cd ” and then drag and drop the folder inside of the terminal window.
This will place the direct path of the folder inside of the terminal window.
6. Inside of your terminal, run the following command:
a. sass --watch style.scss:style.css
7. If run properly, you should see a message like the one below:
8. Open your index.html file inside of your web browser.
9. Add the following lines into your style.scss file
a. body {
background-color: red;
}
10. Refresh your browser and confirm that the changes have been saved.
Congratulations! You’re on your way to creating your own SASS Projects. In the next series of
videos we’ll be going over a new project to work on, so stay tuned.
