The Advantages of Using SASS (and how about

gulp?)Andy Stitt

Deliberate Media Solutions

Agenda- What is SASS?- Why use SASS?- Introduction to Gulp- Installing Gulp and all necessary components needed to compile SASS- BONUS: using Gulp to minify the CSS for your live site

What is SASS?- Stands for Syntactically Awesome Style Sheets- Breaks up CSS into modular code- In English: instead of one super long stylesheet, you can have several shorter

stylesheets that combine into one

Why SASS?- Easier to maintain styles when they are broken up into components instead of

one long document- Use of variables and nesting makes it more efficient to write code- Easier to maintain your codebase over time- Saves you time and money

Why not SASS?- When it’s too heavy for the job, AKA smaller stylesheets- If you mostly customize commercial/off-the-shelf themes

Breakdown of SASS

-- main theme folderstyle.css--scssstyle.scss

--partials_variables.scss_header.scss_content.scss_footer.scss

Breakdown of SASS

_variables.scss

_header.scss

_content.scss

_footer.scss

style.scss style.css

Variables and Nesting- SASS allows you to store values in variables, i.e. $blue instead of #000ff- You can also do nesting with your CSS:

header { h1 { values here header h1 {values here} } header h2 {values here} h2 { values here }}

SASS Compiling- It doesn’t just magically all come together- Compile code from partial files into main SASS file- Many different options for SASS compilers- If you absolutely will not ever ever ever use the command line but still want to

use SASS: https://incident57.com/codekit/- If you want to get your command line feet wet: use Gulp!

Intro to Gulp- Gulp is a task runner- In English: it does certain things that happen during the development process,

such as compiling SASS and minifying CSS and JavaScript- Set it up to do these things in advance and do all the things with one

command

Install Node.js- Before you can install Gulp, you must install Node.js first:

https://nodejs.org/en/ - Node Package Manager (NPM) will allow you to install Gulp and all of its

component parts

Install Gulp- Open up your command line tool- First, install gulp globally: $ npm install --global gulp-cli- Then, go to your project directory: $ cd your-project-directory- Then, initialize your project directory: $ npm init- Then, install gulp in your project devDependencies:

$ npm install --save-dev gulp- Then, create gulpfile.js- Then, run gulp: $ gulp

Source: https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

Install Gulp Sass and Gulp Clean CSS- $ npm install --save-dev gulp-sass- $ npm install --save-dev gulp-clean-css- Gulp Sass is the SASS compiler, and Gulp Clean CSS is the minifier

Why minify CSS?- Smaller CSS files = faster website load time- Faster website load time = happier website visitors

Live demo

Summary- Use SASS to make a larger CSS codebase more manageable- Use Gulp to compile the SASS and minify the CSS- Don’t be terrified of the command line

Resources- Introduction to SASS and Gulp: https://github.com/andystitt829/phillywp - A SASS-ified version of the TwentySixteen theme:

https://github.com/andystitt829/twentysixteen-sassified - Separated the component parts of TwentySixteen according to the table of

contents

Questions?- https://deliberatemediasolutions.com- andy@andystitt.com- Twitter: @andywpdev