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.ĭownloaded he child theme and will experiment by rolling the enqueues, function and nested folder into my own child theme. You can download the code from this tutorial on Github. Sass is generally considered to be more feature rich and Less is considered simpler to use. The two leading CSS preprocessors are Less and Sass and which one is best comes down to which one you are most comfortable with. 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. He also shows how to place media queries within the CSS instead of having to wrap the CSS in a media query. SJ demonstrates how the nesting function of preprocessors allows you to have the same functionality while keeping the code relatively clean and simple. 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.Ĭreating CSS selectors that are specific enough to override other CSS can make a stylesheet really, really messy. Starting with a standard install of Divi and a standard child theme, SJ walks you through enqueueing your website to use Less. You will have to do some downloading and set-up if you switch to using Node.js. 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. SJ James demonstrates this using Less, which can be found at. You can code using variables, nesting, mix-ins, and more, and the preprocessor will convert it to standard CSS. Using preprocessors for your CSS allows you to overcome almost all of its drawbacks. If you missed the Facebook live, you can rewatch it at any time! On Wednesday the 6th of June, Divi Space hosted a Facebook Live session introducing viewers to Preprocessors for CSS.
0 Comments
Leave a Reply. |