LESS Chronicles – Guards

This is the final article in a 3-Part LESS Chronicles series. I’ve saved the best for last! At the same time, it’s also the most complex part of LESS for some to grasp; Guards or Guarded Mixins. Guards are similar to PHP if/else statements, in that they are a bit of a conditional statement. For example if this thing is true, then do this; if not, then do this. Except we can take this a long way, as you’ll start to see below.

LESS guards can automate batches of mixins based on a single “trigger.” In the examples below, we’re going to be referencing a few custom LESS variables found within PageLines Framework. These LESS vars are dynamically linked to the color wheels in Color Control. As the user adjusts their colors, we can in turn automate styling details based on their selection. The trigger var can be any custom var, so this can be applied to anything.

What does this mean? It means that users can choose a color, and we can automate accompanying styles so they don’t have to style them with additional custom code. Since we can have LESS variables with dynamic relationships, “turning designs into muck” is quickly becoming a thing of the past. Check out the examples below.

Text Shadow Guard

CSS text shadows are cool. But sometimes that white text shadow doesn’t look good when the text is turned different colors. With a text shadow guard, we can return different styles based on what the user chooses. In this case, @pl-headers is a LESS variable in PageLines that’s connected to the ‘Header’ color control.

In the first rule, we’ve built a mixin called .ba-textshadow. We’re passing a trigger variable called @pl-headers, and we’re saying that when the color of the header color is greater than or equal to 50% lightness, return a black text-shadow. The second statement says the reverse; if the color of the headers is less than 50% in lightness, return a white text shadow.

[pl_codebox language=”css”] // Guards
.textguard(@pl-headers) when (lightness(@pl-headers) >= 50%) {
text-shadow:0 1px 0 @black;
}
.textguard(@pl-headers) when (lightness(@pl-headers) < 50%) {
text-shadow:0 1px 0 @white;
}
// Usage
.myheader {
.textguard(@pl-headers);
}
[/pl_codebox]

We can actually extend this even further with the use of and. So, what if we wanted to include the lightness of a custom LESS variable we’ve created called @my-var? Simple, we just include it with the and trigger.

[pl_codebox language=”css”] // Guards
.textguard(@pl-headers) when (lightness(@pl-headers) >= 50%) and (lightness(@my-var) >= 50%){
text-shadow:0 1px 0 @black;
}
.textguard(@pl-headers) when (lightness(@pl-headers) < 50%) and (lightness(@my-var) < 50%){
text-shadow:0 1px 0 @white;
}
// Usage
.myheader {
.textguard(@pl-headers);
}
[/pl_codebox]

Box Shadow Guard

We can use the same method for a CSS box-shadow guarded mixin. Here we’re saying, if the color of @pl-base is greater than or equal to 50% lightness, return a white box-shadow color. Conversely, if the color of @pl-base is less than 50% lightness, return a black box-shadow color. In this example, @pl-base is connected to the Background Color Control.

[pl_codebox language=”css”] // Guards
.boxguard(@pl-base) when (lightness(@pl-base) >= 50%) {
.box-shadow(0 1px 0 @white);
}
.boxguard(@pl-base) when (lightness(@pl-base) < 50%) {
.box-shadow(0 1px 0 @black);
}
// Usage
.mydiv {
.boxguard(@pl-base);
}
[/pl_codebox]

Width Guard

In my last example here, we’re doing something really amazing. What we have here is a LESS guard that behaves precisely like a media query does, but with a lot more dynamic control. This is amazing, in that this doesn’t actually show in the output like a media query does.

With the width guard example below, we can have a finite control over what happens to the users layout changes. By this I mean, within PageLines Layout Editor. PageLines has a number of dynamic layout variables built-in that change dynamically just like the color variables do. In this case, we’re gonna be referring to @pl-content-width, which is directly linked to the main column width found in Layout Editor within PageLines (also check out @pl-sidebar-width which controls, you guessed it, the width of the sidebar).

Here’s the guard.

[pl_codebox language=”css”] // Guards
.ba-width (@pl-content-width) when (@pl-content-width < 500) {
background:red;
}
// Usage
.mydiv {
.ba-width(@pl-content-width);
}
[/pl_codebox]

The guard says, that when the width of the main column is less than 500px, return a red background color. This is a pretty crude example, but hope that you get the point. We wouldn’t necessarily turn the background color red, but serves to show what kind of power we have with this type of guard.

There is however just one nuance with the width guards; they won’t really work in the dynamic sense of the constantly changing browser width. In other words, once LESS compiles the page and the width, thats that. LESS does offer the ability for us to tap into the JS environment, but there’s no sense in recreating the wheel there. So in other words, we can use content guards to supplement our designs without bloating the style, but not to dynamically resize something in the sense that we traditionally use media queries currently.

Wrap Up

So are you all LESS’d out? Are you a LESS-pert now? Haha sorry been wanting to do that since the first post. Anyways, I hope you at least walked away with something. Just remember, if you’re building products for the PageLines Store, picking up all these techniques is only going to make your stuff rock harder.

P.S. – Here’s a copy of the code on GitHub in case you want to get freaky with it.