The Advantages of Using SASS and Gulp
- 1. The Advantages of Using SASS (and how about gulp?) Andy Stitt Deliberate Media Solutions
- 2. 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
- 3. 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
- 4. 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
- 5. Why not SASS? - When it’s too heavy for the job, AKA smaller stylesheets - If you mostly customize commercial/off-the-shelf themes
- 6. Breakdown of SASS -- main theme folder style.css --scss style.scss --partials _variables.scss _header.scss _content.scss _footer.scss
- 8. 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 } }
- 9. 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!
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. Why minify CSS? - Smaller CSS files = faster website load time - Faster website load time = happier website visitors
- 15. Live demo
- 16. 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
- 17. 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
- 18. Questions? - https://deliberatemediasolutions.com - andy@andystitt.com - Twitter: @andywpdev