I've been working with WordPress for three years, but it wasn't until a year ago that I got serious about WordPress development. Specifically, I'm passionate about child theming and spend much of my time working in theme development.
During the past couple of years, we've seen the rise of CSS preprocessors - mainly, tools that make writing stylesheets easier and make them more maintainable.
In this series, we're going to take a look at what preprocessors are, what popular ones are available, and how we can integrate them into our theme development.
Where We're Headed
When it comes to user-interface development, it's not just about how to make things look great, but it's also about making things well-structured and as performant as possible, and I believe that this should be something that's pulled through in our WordPress projects, as well.
In this series, I plan on giving a little background on what preprocessors are and highlight some of the key players in the space. I will also talk about some of the more popular frameworks. I will then move on to more of a deep dive into LESS and explain why I prefer using it. Lastly I will cover how to use it with CodeKit to compile your CSS for your theme.
About CSS Preprocessors
As mentioned, there are a number of CSS preprocessors, the most commonly used being LESS and SASS. Both are syntactically similar and can dramatically increase the speed at which you can write your CSS.
There are a few differences like their compilers and extensions or frameworks with which they can be combined.
LESS
LESS is a dynamic stylesheet language. You can write your CSS programmatically in a .less file and compile your output into a .css file. The compilation language for LESS is JavaScript. This a great because you can run the compiler on the server side or client side.
Some of the features of LESS include:
- Variables - Variables can be defined and are used throughout your file. Make a change in one place and see it updated wherever it's used.
- Mixins - Mixins include a bunch of properties from one ruleset into another ruleset. You can also use Parametric Mixins that accept arguments.
- Nested Rules - Nested Rules give you the ability to use nesting instead of, or in combination with cascading.
- Namespaces - Namespaces allow you to group your variables or mixins, for organizational purposes, or just to offer some encapsulation.
I will be going into more detail on the syntax for these in the next post in this series.
Two of the more popular front-end frameworks that use LESS are:
SASS
SASS is an extension of CSS3. It has two syntaxes: .scss and .sass. .SCSS is the most common syntax used but it also supports the older indented syntax.
Some of the features of SASS include:
- Variables - Variables can be defined and are used throughout your file. Make a change in one place and see it updated wherever it's used like LESS.
- Mixins - Mixins allow you to re-use whole chunks of CSS, properties or selectors like LESS
- Nesting - Avoid repetition by nesting selectors within one another like LESS
- Selector Inheritance - It can tell one selector to inherit all the styles of another without duplicating the CSS properties. Not available in LESS.
Here's a few frameworks that include SASS and SCSS:
Conclusion
CSS Preprocessors are definitely a growing trend in web design. They can dramatically speed up the time you spend on writing styles for your sites.
They can also help with structuring your CSS like you would functions in other languages like PHP or JavaScript. If you aren't already using CSS preprocessors in your web project, you should definitely consider it.
Now that we've taken a look at two of the more popular preprocessors, I'll take a deeper dive into LESS and give some reasons why I personally choose to use it in the next post. I will also show you how to get started with using CodeKit with your WordPress projects.
Comments