Using LESS with WordPress
Back when I used to have an office job, 80% of the work was repetitive and far from challenging. As a result, I came up with ways to automate various tasks (think Excel Macros, Access, Crystal Reports, etc.). This allowed me to focus on items that actually required some form of judgement or decision-making. When I made the leap to the web industry more permanent, I found myself facing the same mundane work. Vendor prefixes became the new TPS reports. In the process, LESS (or SASS) became my new macros. In this article, I’ll show you how you can also drastically increase your productivity and focus on what matters.
Preface – Still using CSS?
LESS allows you to use a syntax style that naturally extends CSS in ways that can drastically optimize your workflow. If you’re a web designer and aren’t using one, you’re probably spending more hours on client projects then you really need too.
There are also a number of people who hold onto writing CSS for reasons of purity, making preprocessors sound as evil as growth hormones given to animals. Truth be told, there’s nothing sexy about having 10,000 lines of static CSS. Besides, CSS zen doesn’t come from indenting vendor prefixes in a straight line, but finding the right balance with regards to specificity and flow. I feel as we sometimes focus on too many of the small details as opposed to the big picture, which is why we often see alphabetically sorted properties but nothing that resembles an effective table of contents (nothing against the former, but the latter takes precedence).
At the end of the day, once your files are minified, concatenated and stripped of any comments… we’re all equal. Ready to get started?
1) Setup LESS
The most seamless experience you’ll have using WordPress and LESS is by using wp-less, which acts as bridge between WordPress and less-php (a general PHP compiler for LESS). There are other ways to implement LESS (less.js, node or pre-compiling via a desktop application). I just find the on-the-fly compiling to be the most painless solution for small to mid-sized websites. It compiles only when any of the original LESS files are changed (including anything brought in via @import), so the outputted data will always be the compiled CSS.
To install it, you can either include my front-end starter foundation (more information on that in the next section) or submodule the repository directly and pull it in through your functions.php, like so :
require_once( 'wp-less/wp-less.php' );
To use it, simply enqueue a LESS stylesheet the same way you would CSS. The difference is wp-less runs a filter and checks for any mention of the “.less” extension thus diverting it’s path to the compiler before outputting in the header of your document.
wp_enqueue_style( 'less-style', get_stylesheet_directory_uri() . '/style.less' );
That wasn’t so hard was it?
2) LESS Structure
Like many developers out there, I have my own foundation I use for projects (it includes a template that outputs theme styles like this). I’ve finally taken the time to consolidate it as a github repository so that others can use it if they wish. It’s called prometheus and is my starting point with regards to any front-end development on WordPress. It contains my base LESS files, wp-less, WPThumb (a superior thumbnail solution for theme developers) and the styles template.
As all the LESS data is compiled to a single CSS file, it’s very easy to keep a modular structure that allows for a “table of contents” view through multiple files, folders and prefixing.
You’ll notice on this website that I enqueue two files, screen.less and print.less for their respective purposes. However, print.less is simply a different collection of modular pieces then screen.less is.
functions.php
function nt_less() {
if ( ! is_admin() ) {
wp_enqueue_style( 'screen', get_stylesheet_directory_uri() . '/screen.less', null, '2.2', 'screen' );
wp_enqueue_style( 'print', get_stylesheet_directory_uri() . '/print.less', null, '2.2', 'print' );
}
}
add_action('wp_enqueue_scripts', 'nt_less');
screen.less
/* Foundation * ----------------------------------------------------------------- */ @import "prometheus/prometheus.less"; @import "prometheus/less/1140.less"; /* Site * ----------------------------------------------------------------- */ @import "less/variables.less"; @import "less/typography.less"; @import "less/body.less"; @import "less/mobile.less"; /* Plugins * ----------------------------------------------------------------- */ @import "less/x_jquery_grid.less"; @import "less/x_wppaginate.less"; @import "less/x_gravityforms.less"; @import "less/x_syntaxhighlighter.less"
print.less
This took another five minutes to put together due to the modular structure (try print preview to see the end result). It’s a stripped down version of screen.less with the added .do-not-print class.
/* Foundation
* ----------------------------------------------------------------- */
@import "prometheus/prometheus.less";
@import "prometheus/less/1140.less";
/* Site
* ----------------------------------------------------------------- */
@import "less/variables.less";
@import "less/typography.less";
/* Print-specific
* ----------------------------------------------------------------- */
.do-not-print {
display:none;
}
3) LESS Tips
Now that you’re setup with LESS and WordPress, you’re ready to save some serious work time! There are a number of common practices I’ve come up with that I hope will help you out too:
Create duplicate LESS files for your Plugins
You’ll notice in screen.less I have separate LESS files for the plugins I use on this site (all prefixed with “x_” so that they sink to the bottom of my directories). I always turn off plugin styles and copy the contents into a LESS file. This allows me to use variables and mixins right from the start when it comes to customizing their individual styles. It’s a pain to have to edit vendor prefixes within other CSS files or to constantly have be wary of any plugin updates overwriting your files. Plugin CSS rarely changes in my experience and having them in LESS right from the start is a huge win (and results in less files being outputted, no pun).
Generic and Prefixed Variable Names
During the construction of a website, you’ll easily find yourself changing colors and fonts regularly till you find the right fit. Whilst I used to use variables such as @helvetica or @lightblue, I now use more flexible equivalents, such as @f-body and @c-hover. This comes with the great benefit that you never have to change the variable names across different files, nor do you ever have to wonder what the context is.
Nesting is your friend
This is one of the features I find so powerful yet underused with LESS. Nesting gives us an enhanced workflow for inheritance, one that effectively kills off repetition and provides truly valuable visual structure.
Let’s take a simple example. Check out the responsive version of this website and you’ll notice a navigation toggle. The LESS for this is dead simple, and probably doesn’t feel too remote from standard CSS. However, imagine this with multiple dropdown’s, interaction states and more. Being able to nest in such situations is invaluable (anyone remember superfish.css? ugh, endless .sf-menu declarations).
#mobile-nav-flyout {
background:rgba(18,38,60,1);
ul, li {
margin: 0;
}
li {
text-transform: uppercase;
font-size:16px;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(0,0,0,0.15);
&:first-child {
border-top:none;
}
&:last-child {
border-bottom:none;
}
a {
display:block;
padding:10px 20px;
}
}
}
Easy Color Changes
Colors change so often during development that it can be time-consuming to constantly go and find the right hex colors.
Instead of having to seek out random hex colors such as this example:
.gradientBar(#FF5536, #ED3314);
We can simply work off a color variable to create a slightly lighter or darker value:
.gradientBar(@c-sec + #111, @c-sec);
Both will output the same in the end:
background-color: #f73d1e; background-image: -moz-linear-gradient(top,#fe4425,#ed3314); background-image: -webkit-gradient(linear,0 0,0 100%,from(#fe4425),to(#ed3314)); background-image: -webkit-linear-gradient(top,#fe4425,#ed3314); background-image: -o-linear-gradient(top,#fe4425,#ed3314); background-image: linear-gradient(to bottom,#fe4425,#ed3314);
Do you use LESS?
What are your experiences with LESS? Are you using it for WordPress or client projects? Would be interesting to hear how others setup their themes and have increased their CSS productivity.