LESS Chronicles – The Basics

CSS pre-processors LESS and SASS are all the rage these days, making development quick and fun. Both LESS and SASS extend CSS by way of functions, mixins, variables, and more. This series isn’t so much a lesson on how LESS or SASS syntax works, but more as a primer for utilizing them within PageLines, as they’ve adopted both libraries into the framework. It’s worth noting that while you normally need a compiler like Codekit to compile the LESS into CSS, PageLines Framework is one of the only WordPress frameworks in existence to bring live-compiling and caching on board.

If you’re wondering why LESS was chosen over SASS, its because there’s a PHP LESS compiler class available ported straight from C. Here’s a few more thoughts from Mark Otto, one of the creators of the Bootstrap library on why they also went with LESS over SASS.

Primer

I just want to quickly lay a foundation here and explain how LESS works in PageLines. Each section, or modular element of the framework, has it’s own style.less file. Additionally, child themes also have a style.less file, as well as plugins (although this requires a simple filter to add the file to the array). The framework will automatically load all .less files found within core, child themes, sections, and any plugins. This master, virtual .less file is then compiled on the fly, and cached using one of two methods for optimal performance. This compiled LESS file is re-cached with every framework save. If you’re working locally, you can add define('PL_LESS_DEV',true); to your wpconfig file to turn off caching. Although it’s important to NOT leave this running in a production environment for obvious reasons.

Variables

Using LESS you can assign variables to things like hex and rgba color values. Bootstrap has quite a few basic variables built in, whilst PageLines has developed their own variables to aid in styling and providing dynamic relationships with other elements. You see, when you change the background color of your site, a lot of stuff happens behind the scenes. Instead of elements each with their own distinct color values, LESS allows these elements to talk and react to one another.

Take this snippet below for example. We have a div of .foo with the color being a variable called @pl-text. This variable is linked to the Text Color, Color Control within the framework, and is dynamically set by the user. On the background, we have a color 20% lighter than the variable @baseContrast. This variable, is linked to the background color within Color Control. So when a user changes colors, elements using those variable react accordingly. This relationship is one of the primary reasons why there aren’t an abundant amount of color controls, because 90% of the elements colors are set automagically.

LESS has quite a few of these color functions listed here.

[pl_codebox language=”css”] .alpha {
color: @pl-text;
background: lighten(@baseContrast,20);
}
[/pl_codebox]

And because of this dynamic relationship, I suggest not hard-coding your PageLines store products with colors; instead using dynamic relationships with LESS and our variables. This makes the users life easier, when they don’t have to spend extra time styling your products CSS to match what they’ve changed using the Color Control panel within PageLines Framework.

Mixins

Mixins are basically CSS rulesets that we can use in multiple places throughout our style. Looking back on our example above, we can apply the class .foo and all it’s properties by just calling it within another property.

[pl_codebox language=”css”] .alpha {
.bravo;
}
[/pl_codebox]

Mixins can accept arguments as well. Two examples that come to mind are border-radius and box-shadow.

[pl_codebox language=”css”] .alpha {
.border-radius(5px 0 5px 0);
}
.bravo {
.box-shadow(0 1px 0 rgba(255,255,255,0.5));
}
// String together by escaping and wrapping in quotes;
.charlie {
.box-shadow(~”0 1px 0 rgba(255,255,255,0.5),
inset 1px 1px 1px rgba(0,0,0,0.2)”);
}
[/pl_codebox]

As you can probably imagine this makes updating a breeze. Change one mixin itself automatically updates wherever the mixin is used, just like a variable. I used this repeatedly to ensure consistent design. For example, styling an article with a specific set of styles, then automatically applying those styles to other elements without re-writing code.

Nesting and Media Bubbling

These guys kind of run hand in hand together like lovers frolicking through a field like leetle deer. Nesting CSS provides consistency, and specificity. Not to mention it becomes incredibly organized. Some caveats come to mind when nesting anchor and hover attributes, and are handled like the below snippet.

[pl_codebox language=”css”] .alpha {
a {
color:@pl-text
&:hover {
color:darken(@pl-text,20);
.transition(.2s ease-in-out);
}
&:active {
color:darken(@pl-text,10);
.transition(.2s ease-in-out);
}
}
}
[/pl_codebox]

Media Bubbling is actually a newer addition to the PHP LESS compiler that’s used within PageLines Framework, and is something I personally requested a couple months back. It allows for a greater degree of encapsulation, and instead of bunching media queries at the end, it becomes natural to just include them within the source. For example, the snippet below.

[pl_codebox language=”css”] .alpha {
width:50%;
@media (max-width:767px) {
.alpha {
display:block;
}
}
}
[/pl_codebox]

In the next post, we’ll cover how I structure my LESS files, followed by LESS for da l33t. Thoughts? Questions? @ me on Twitter.