The code in this repository is based on Traversy Media's video tutorial on building a Social Network Theme With Sass. The aim of the tutorial is to build reusable CSS components with Sass that can be used throughout the website.
- Install nodejs.
- 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.
- 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
andPrettier
. 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 theextensions.json
file in the.vscode
directory should you wish to edit these. Likewise in the same directory you can find thesettings.json
file should you wish to edit the recommended settings. - Run
npm install
from the project folder to install the dependencies listed in thepackage.json
file. - Click the
Watch Sass
button in the bottom bar of Visual Studio Code to perform live comilation of SASS or SCSS to CSS. - Open
dist/index.html
, right click on the text editor area and selectOpen With Live Server
(or run your preferred development server) to launch the application in your default web browser.