Introduction to Using Preprocessors for CSS

Introduction to Using Preprocessors for CSS

On Wednesday the 6th of June, Divi Space hosted a Facebook Live session introducing viewers to Preprocessors for CSS.

If you missed the Facebook live, you can rewatch it at any time!

Intro to preprocessors

Posted by Divi Space on Wednesday, June 6, 2018

Using preprocessors for your CSS allows you to overcome almost all of its drawbacks. You can code using variables, nesting, mix-ins, and more, and the preprocessor will convert it to standard CSS. This helps keep your code cleaner.

SJ James demonstrates this using Less, which can be found at lesscss.org.

While using the Node.js can be better since it doesn’t require the browser to do the converting to standard CSS, SJ is using the coding in browser option because it is simpler to get started with and better for demonstrating what the preprocessing is doing. You will have to do some downloading and set-up if you switch to using Node.js.

Starting with a standard install of Divi and a standard child theme, SJ walks you through enqueueing your website to use Less. He then explains how to input a color palette so you can use color names instead of hex code, making a mix-in for a gradient you want to reuse, and how to set up import files for both to keep your code clean.

Creating CSS selectors that are specific enough to override other CSS can make a stylesheet really, really messy. SJ demonstrates how the nesting function of preprocessors allows you to have the same functionality while keeping the code relatively clean and simple. He also shows how to place media queries within the CSS instead of having to wrap the CSS in a media query.

The operations feature of preprocessing is demonstrated by setting a base size for your font and then making all other fonts size up or down relative to the base with just a few lines of code.

The two leading CSS preprocessors are Less and Sass and which one is best comes down to which one you are most comfortable with. Sass is generally considered to be more feature rich and Less is considered simpler to use.

You can download the code from this tutorial on Github.

The Introduction to Using Preprocessors for CSS was just a small taste of the incredible knowledge that SJ James has to offer! As one of the trailblazers in the Divi community, SJ James has years of experience with the Divi framework and certainly knows how to work well with it.

If you loved the content of the webinar and loved learning from SJ, then have a look at our online course! Now in its second enrollment of the Transforming Divi with CSS & jQuery Course will start June 15th. You can register now.

Here is a sneak peek of whats included in the course:

  • Private Facebook Group
  • Introduction to CSS
  • Introduction to jQuery
  • Five real-world examples where custom CSS has been used to make Divi better
  • The jQuery Cheat Sheet
  • Moving & Replacing with jQuery
  • Preparing a child theme for jQuery & CSS
  • Bonus: Inserting Layouts in Template Pages
  • Bonus: Editing Modules

For more information about the Transforming Divi with CSS and jQuery course, read this blog post or sign up now!

 

Other topics that were mentioned in the webinar include:

The Icon Party plugin will be available within a couple weeks. It will allow you to pull in a larger array of Social Media Icons.

Thank you David Blackmon for the shout-out and letting everyone know that I’m currently working on the recaps for the blog. Speaking of David Blackmon, you can meet him at Word Camp Orange County 2018.

Randy Brown

Randy A Brown is a professional writer specializing in WordPress, eCommerce, and business development. He loves helping the WordPress community by teaching readers how to improve their websites and businesses. His specialties include product reviews, plugin and theme roundups, in-depth tutorials, website design, industry news, and interviews. When he's not writing about WordPress he's probably reading, writing fiction, or playing guitar.