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!
https://www.facebook.com/wpzoneco/videos/1759539710760828/?fref=gs&dti=844564702301508&hc_location=group
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.
Is there any way to accomplish a similar result without needing a child theme? Could I set the variables just in the Divi theme options somewhere possibly?
Fantastic SJ.
Thanks so much.
A little while ago I spent a lot of time trying to find out if this can be done. Maybe it was because I did not know the term preprocessor but my searching was fruitless.
So thanks again so much for this great tutorial.
Hi SJ,
Downloaded he child theme and will experiment by rolling the enqueues, function and nested folder into my own child theme. I am curious to see how it performs.
Currently I have LESS installed through nodejs locally. Initially I would FTP with FileZilla the style.less and style.css file to the tmp directory and and the LESS watch and sync the files with FileZilla observing the changes and pushing them back to the server.
For the last year I have been using the Prepros programme to do the same job but you need to run this on the files stored locally. This is fine if you work alone but not if you work in a team because things could get out of sync unless you impose a rule whereby you could download the child theme directory every time you worked on the site to circumvent overwriting work done by another member of the team. Cumbersome!
If the way you do it is used on a remote site can you FTP the style.less file to your local machine to work on, having FileZilla push the changes as you save and in turn the preprocessor run remotely. Can you clarify, the less-js script is enqueued remotely from cloudflare? Is the preprocessing done remotely at cloudflare and is this an issue in terms of security/data protection.
Also is the less being processed to a minified css file? Prepros will do this but you have to be careful as it strips out all comments as well and means that the child theme will not be seen under Appearance -> Themes as loadable. You can load once then minify and that is fine. But, if you try to load the theme again you will have issues. For this reason I do all my customised styling in a custom-style.less/css pair of files and enqueue them separately to all my other enqueues. The separate enqueue is because you set a priority so it loads later, otherwise you need to stamp !importants all over the place.
You mentioned that you will demonstrates setting up LESS with nodejs. Will be interested how you work this and perhaps you will outline the advantages and disadvantage compared to how you did it in this post
Best regards.
Hi, thanks for the tip, his comes just in time.
By the way I am probably more interested by using Sass, so it could be nice if you add the Sass version on Github to.
Please let me know if/when you can do it.