This tool / build system is meant for beginning developers or developers new to Front End Development or trying to expand their skills and want to develop & code responsive web pages with modern tools like CSS Pre-Processor SASS/SCSS and a Task Runner like Gulp.
The master branch contains all the tools you need to get up and running with SCSS quick but it doesn't contain a CSS Framework like Bootstrap or Foundation.
If you want to use Bootstrap and have it all setup for you, you can use the "bootstrap-3" branch.
Nothing more is required after you run npm install
Before you follow each step, please read the entire step first, then go back and follow the instructions.
Step 1. Node.js
Click the link above. When the page loads, click the button that contains "Recommended For Most Users". After the download is complete, install Node.js
Step 2. GIT for (Windows) (OSX)
Windows - Click the link above. Download and install GIT for Windows.
OSX - Install Xcode through the app store. GIT is included and installs with Xcode.
Step 3. SASS Quickstart git clone https://github.com/Boardley/SASS-Quickstart.git
Windows - Open your command prompt by holding down the ❖ Windows Key and press R when the Run window opens, type cmd and click OK or press ENTER. With your command prompt open
copy and paster the code above into your command prompt and press enter.
OSX - Open your terminal. Hold Command + Space. Type "terminal" and press enter. With your command prompt open copy and paster the code above into your command prompt and press enter.
Once Sass Quickstart is finished downloading. Switch to the Sass-Quickstart directory by typing
cd SASS-Quickstart
Step 4. GULP npm install -g gulp
The next step is to type the command above into your command prompt and press ENTER.
This step is required so that GULP will run and build your files.
Step 5. INSTALL Everything npm install
In your Terminal / Command Prompt type the command above and press ENTER
This process downloads all of your packages and all of the tools you need to develop
with SASS/SCSS and make responsive web pages.
Step 6. Build files gulp
In your Terminal / Command Prompt type the command above and press ENTER
This command performs the initial build of all of your files. When this process is complete
move on to the final step.
Step 7. COOLNESS! gulp serve
In your Terminal / Command Prompt type the command above and press ENTER
This command starts your local server, browser sync for live reloading of your webpages and watches your files for changes and then reloads them in the browser in real time. A huge timesaver.
You must keep the command/terminal window open in order for your build system to run and watch your files. When you're done developing, you can just close your terminal / command prompt and it will stop
the local server. When you want to fire it up again and develop some more, then open your terminal / command prompt and navigate to your SASS-Quickstart folder and then type gulp serve .
Great question. A good place to start would be to open the _src folder inside your SASS-Quickstart folder with your favorite code editor. In the _src folder you will see a folder called scss and inside that folder, you will see a file called _base.scss. This is the file can start adding your SASS/SCSS or plain CSS to and watch the magic happen. :) As you save your HTML and SCSS, the browser will reload it for you on the fly and you can see your changes instantly in the browser window.
If you don't have one, Visual Studio Code is a great tool for development and best of all, it's FREE.
I hope this is the easy and quick start to using SASS/SCSS you've been looking for. If you need help or have questions, please contact me. :) Happy Coding.