covuworie / sass-crash-course

Sass Crash Course

Sass Crash Course

The code in this repository is based on Traversy Media's video tutorial titled a Sass Crash Course. The aim of the tutorial is to introduce you to the main features of Sass by building a landing page header.

Prerequisites

1. Install nodejs.
2. Install Visual Studio Code. If you don't install it you will have to find another way of installing sass and compilation. The rest of the instructions assume you are using Visual Studio Code.

Running the code

1. You will be prompted to install the the recommended extensions when you open up the code folder in Visual Studio Code. Go ahead and install these. They are Live Sass, Live Server and Prettier. The first is essential as it compiles .scss and .sass files into .css files. The last two extensions are optional. The recommended extensions can be found in the extensions.json file in the .vscode directory should you wish to edit these. Likewise in the same directory you can find the settings.json file should you wish to edit the recommended settings.
2. Run npm install from the project folder to install the dependencies listed in the package.json file.
3. Click the Watch Sass button in the bottom bar of Visual Studio Code to perform live comilation of SASS or SCSS to CSS.
4. Open index.html, right click on the text editor area and select Open With Live Server (or run your preferred development server) to launch the application in your default web browser.