So far we've looked at creating variables in Less. It is time to take things up a notch, and take a look at a key part of Less functionality: mixins.
What are mixins? Put simply, mixins are preset blocks of CSS that you can literally mix-in (pun intended!) to produce new CSS styles. They are very much like the building blocks needed to build a house. On their own, they may not be very useful, but once combined into another style, they can become very useful. In this exercise we're going to look at a very simple example of three different colored blocks, for which we will create a box-shadow mixin to use in our style code.
- Open up your normal text editor, and save a copy of the template file from the previous recipe as
test less mixins.html. Add in 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
mixins.less. You will need to update your HTML code as follows:<link rel="stylesheet/less" type="text/css" href="mixins.less">
- In your LESS file, add in the following styles. We'll break it down into a number of sections, starting with the setting of basic values:
@boxwidth: 100px; @boxheight: 50px;
- 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; } div { height: @boxheight; width: @boxwidth; } - Let's now add in the individual styles for each of the three squares:
.left_box { background-color: #FF1010; .box-shadows; } .middle_box { background-color: #800000; .box-shadows; } .right_box { background-color: #000000; .box-shadows; } - 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 in the following lines:.box-shadows { -webkit-box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75); -moz-box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75); box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75); } - If all is well, you will see the following screenshot when previewing the result in your browser:
Mixins in Less work on a simple principle of replacing code wherever it sees the corresponding CSS style. It is perhaps easier to think of it as a placeholder, or a shorthand code; as soon as Less sees one, it will replace it with the appropriate styles. So, in our example, the right_box styles contained this within the LESS code:
.right_box {
background-color: #000000;
.box-shadows;
}When compiled, LESS will automatically replace it with the following CSS:
background-color: black; -webkit-box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75); -moz-box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75); box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75);
The browsers will then discard the box-shadow style it doesn't understand; in this instance, this is what would be left when looking at this demo from within Firefox:
.right_box {
background-color: #000000;
box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75);
}Although we've looked at a simple example here, the same principle works for a multitude of uses. There really is no limit in what you can achieve, provided you plan your styles carefully!
The downside of using mixins is that there will be instances where you have styles that are very similar to existing ones, but which you can't alter to fit them, as one or more of the values has to remain unique. As you can see from the preceding example, the box-shadow values are fixed for all three boxes, with only the browser showing the relevant box-shadow style attribute, depending on which browser you use.
Now you're probably thinking that this is a bit irritating, as you can't vary the styles, and that it will likely mean that you will still have some duplication that you can't remove. What if I said that it was possible to pass different parameters to mixins, in much the same way as you would do with functions in PHP, for example? Well, you can, and we'll have a look at how to do this within the next recipe.