SASS and CSS-Preprocessing as a whole is absolutely crucial. Having spent many years writing CSS by hand, long before widely accepted standards, I felt so relieve when CSS Preprocessing came along. Most importantly, CSS Preprocessing is another tool that helps facilitate modular web design, and makes it a bit more easier to separate presentation from content.

For the longest time however, I was confused as to how to use CSS Preprocessing in my WordPress Development. I did a lot of my WP dev work on my personal Windows machine, and just never took the time to figure out how to install all the dependencies. It just never occurred to me to just use NodeJS and Gulp to manage development in a PHP environment until a few years ago.

Wait, there’s more

So using Gulp in WordPress development is nothing new and there are many examples of this online. I want to focus more on how to levgerage a CSS Framework like Zurb’s Foundation or Bootstrap. Both of these frameworks offer raw SASS files complete with a settings / option file that you can override, and I’m sure there’s a few ways of customizing these styles into a WordPress theme.

Foundation Settings file
Foundation’s settings file that can be customized

CSS Frameworks like Bootstrap and Foundation can help tremendously with ensuring consistent styling and speeding template development. Both Bootstrap and Foundation have settings files (consisting of variables and mixins) that you can leverage, resulting in two benefits . First, you can override these settings files and compile customized versions of these frameworks. You get all the styles for grids, buttons, navigation, customized to fit your brand design. Second, you can then leverage the variables and mixins in your own work, leading to rapid development of consistent styling. Setting up a workflow so that you can take advantage of these settings is not obvious, which is why I’m documenting my work.

Basic Setup

The basic setup involves creating a NodeJS project, and declaring dependencies such as Gulp. For the sake of this demonstration, I will create this NodeJS project in my theme’s folder. Once my project is set up, I can begin to install the dependencies required to compile SASS. Those dependencies goes as follow:

Gulp
Tool used to automate processes
Node SASS
Library to allow for SASS compilation on NodeJS
Gulp SASS
SASS plugin for Gulp
Gulp Autoprefixer
Add vendor prefixes to CSS rules; used to make non-standard CSS rules work across browsers
CSS Nano
Minifys CSS
Gulp Sass Blob
Allows globbing patterns in SASS
Foundation
The CSS Framework I’ll be customizing.

With these dependencies installed, we can start developing our Gulpfile and SASS assets, and get to the real challenge at hand, importing Foundation into our WordPress theme.

Gulpfile with ES6 Javascript

Hold the presses! Lets use modern Javascript with our gulpfile. When I started this blog post, I had planned to just use the same old gulpFile I had always used. I had been reluctant to use ES6 Javascript simply because I’ve been unclear about all the dependencies needed to compile Gulp with ES6 JS on Windows. Well, it’s 20018 – there are plenty of resources out there that shows how to write ES6 Javascript.

List of Resources for Using ES6 Javascript in Gulpfiles

So how does this translate into code?

Here is my devDependencies from my package.json file complete with the new dependencies for Babel and ES6 transpilation:


  "devDependencies": {
    "babel": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-register": "^6.26.0",
    "babelify": "^7.3.0",
    "browserify": "^14.0.0",
  }

Check out my gulpFile in my next post, where I demonstrate how to import and manually compile Foundation.