In the previous section we focused on how you can use variables to help build up reusable blocks of code, or mixins, but what if you could control which styles are used and when? Huh? You're probably thinking that CSS can do this already, at least in the part where you can define which styles are used. After all, this is standard functionality, right?
Sure it's standard, but not the ability to determine that if say color A is used, then color B should be used, and not color C. This is where you can use Less to create guarded mixins. In this exercise we're going to show a number of squares on screen, where the background color is being determined dynamically, based on how light or dark the color has been set on one of squares.
For this exercise all we need is our text editor, and a copy of the template file we created at the start of this chapter.
- Open up your normal text editor, and save a copy of the template file we created earlier at the start of the chapter as
test less guarded mixins.html. Add the following highlighted lines:<body> <div class="left_box">Lighter</div> <p> <div class="middle_box">Original</div> <p> <div class="right_box">Darker</div> </body>
- Create a new document in your text editor, and save it as
test less guarded mixins.cssand then add the following line to your HTML code:<link rel="stylesheet/less" type="text/css" href="test less guarded mixins.less">
- In your LESS file, add the following styles. We'll break it down into a number of sections, starting with the setting of basic values, and the control statement to determine which background color we're going to use:
@boxwidth: 100px; @boxheight: 50px; .set-bg-color (@text-color) when (lightness(@text-color) >= 50%) { background-color: #fff; } .set-bg-color (@text-color) when (lightness(@text-color) < 50%) { background-color: #ccc; } - We need to add the styles that will determine how the background will be styled, and which control the DIV box sizes:
body { font-family: 'Cookie', cursive; font-size: 26px; color: #ffc; .set-bg-color(#FF1010); } div { height: @boxheight; width: @boxwidth; } - Let's now add in the individual styles for each of the three squares shown on screen:
.left_box { background-color: #FF1010; .box-shadow(3px 3px 5px, rgba(50, 50, 50, 0.75)); } .middle_box { background-color: #800000; .box-shadow(3px 3px 5px, rgba(50, 50, 50, 0.75)); } .right_box { background-color: #000000; .box-shadow(3px 3px 5px, rgba(50, 50, 50, 0.75)); } - The observant among you will have noticed the call for
.box-shadow, but that we've not set the style for this; let's go ahead and fix that by adding the following lines:.box-shadow(@style, @c) when (iscolor(@c)) { box-shadow: @style @c; -webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; } - If all is well, you will see the following when previewing the result in your browser:
The key behind guarded mixins is that they only take effect if a particular condition is true. A good example is controlling the color used on the background of a page. If you have elements on page that use a light color, you would most likely want a dark color, and certainly not white! Equally, the converse is true; if your elements are dark in color, you may well want a light (or even white) color background.
Let's take a look at an example:
.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) { background-color: #fff; }
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) { background-color: #ccc; }Here we've set the .set-bg-color property to be either gray or white, depending on whether the @text-color variable is either a light (that is, lower than 50 percent), or a dark (greater than 50 percent) color. When compiled, you will get the correct background, based on whatever value has been set for @text-color:
.box-1 { color: #BADA55; .set-bg-color(#BADA55); }Although this recipe was designed to be overly simple, you can do some fancy things with it, such as recursion, where LESS can call itself with an updated value creating a loop. You're probably thinking: where can I use that? Easy! Did you ever have to build a number of identical icons, which all use similar CSS? How about building them into a sprite, then using LESS to generate the CSS for you, using a loop? The styles will all have the same text prefix, such as .myclass1, .myclass2, and so on, but it's a small price to pay if it can save you a heap of work, as long as you use a sensible prefix!
Note
If you want to see the example code on how to do this, take a look at the following post:
http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/