6-SCSS and Gulp

Key Objectives

• To modularize our CSS with SCSS (Sassy CSS) files.

• To use gulp to pipe SCSS into our main.css file.

• To set up gulp to watch for changes in our SCSS files and to then update/change the main.css file.

Video

Overview

In this module, we set up more ways to make development cleaner. The problem that we're trying to solve is this: Using a single CSS file by itself becomes unwieldy and difficult to code. We want to be able to compartmentalize CSS for the navbar and function differently than CSS in the footer or about section. SCSS lets us do that. Gulp is there to merge all of our code into one file that the browser will read.

Notes/Tips

• If this doesn't work for you at first, try copying and pasting our current gulpfile.js from the sample code into your individual project. If you do this, be sure to still read and understand the Gulpfile to the best of your ability.

• SCSS is a superset of CSS. This means that it is built on top of CSS, so the CSS work that you've already been doing is highly useful.

• Once you start working with SCSS, you won't want to go back. Again, it's a small amount of work to get set up, but in the end, it is a humongous time saver.

Steps

1. Watch the instructional video.

2. Get a feel for the files in the example repo. Play around with some of the code and see what happens. Experiment.

3. Your major objective in your own application:

   • Set up SCSS with a small change in your application. Feel free to even replicate our change in the navbar, just to ensure it's working.

   • When you successfully make a change, go ahead and add, commit, and push the code.

4. Take a quick look at the SCSS docs. Use these for future reference.

5. Please kindly take a minute to update the LMS and tell us that you've completed the first group of modules.

6. Go on to the next module.

7. Here's the final code.

   • gulpfile.js

     /*  Gulp will be used for development and deployment tasks, 
     such as minification of code, translating SCSS into SASS & CSS,
     and reloading after a save.See the README.md for gulp commands.
     */
     var gulp = require('gulp');
     var browserSync = require('browser-sync').create();
     var sass = require('gulp-sass');
     var reload = browserSync.reload;
     
     gulp.task('serve', function () {
       /* Serve files from the root of the project */
       browserSync.init({
           server: {
               baseDir: "./"
           }
       });
       gulp.watch("*.html").on("change", reload);
     });
     
     // gulp.task('sass', function () {
     //     return gulp.src('scss/main.scss')
     //         .pipe(sass()) // Converts Sass to CSS with gulp-sass
     //         .pipe(gulp.dest('css'))
     // });
     
     /* Compiles SCSS files from /scss into /css */
     gulp.task('sass', function() {
       return gulp.src('scss/main.scss')
       .pipe(sass())
     
       .pipe(gulp.dest('css'))
       .pipe(browserSync.reload({
           stream: true
       }))
     });
     
     /* Runs sass & serve methods. Watches for changes and reloads. */
     gulp.task('dev', ['serve', 'sass'], function () {
       gulp.watch('scss/*.scss', ['sass']);
       gulp.watch('*.html');
     });

   • _navbar.scss

     /* CSS code for the Navbar section. */
     /* Styling for the navbar */
     #main-nav {
       padding-top: 5rem;
       font-size: 18px;
       padding-bottom: 1rem;
     }