latest posts

XtractWeb

all about web development

what is guarded mixin in less? introduction, usage, advantage, examples of guarded mixin in less

Guarded mixins in less

Garden mixin is another very useful and powerful feature of less. In previous lesson we learned about mixin pattern matching in less while guarded mixin adds more control to our mixins. Guarded mixin is a conditional mixin based on expressions rather than simple keywords or values as we used keywords (as patterns) in our pattern matching mixins. So, we’ll be using conditional expressions in our mixins now and our mixins will be applied according to these conditions.

How conditions work in guarded mixins?

Guarded mixins are based on expressions, simply these expressions are some sort of conditions thus our mixin works in following way. If condition 1 is true apply first mixin and if first condition is false then apply second mixin. If you have any programming background like C or java script you may have used if else conditions to get better and close results. Guarded mixins work in same way as if else statements work etc.

Example of guarded mixin

Now we’ll be giving our guarded mixin a try to understand the concept practically as well. So, if you remember, we discussed pattern matching mixins in previous lesson, where our mixins were being applied according to the patterns provided. In same way we’ll be providing guarded expressions to our mixins rather than these patterns. Have a look below:

//creating a mixin and providing guard values to that mixin
.text(@size) when (@size > 14px) {
    font-weight: bold;
    color: orange;
}
//creating another mixin to be applied if guard gets false value in above mixin
.text(@size) {
    font-weight: italic;
    color: green;
}

We have created our mixins above (when keyword is guard), and want to apply styles to our text in this way. If value inside “@size” variable is greater than 14px then we want to apply some styles like font-weight to bold and other provided styles as well. You can clearly see in above code snippet that we have provided some styles there. These styles will be applied if condition comes true, while we want to apply different styles if value is not greater than 14px. Then our styles will be like font-weight italic and color green etc.

As we created our guarded mixins now it’s time to use guarded mixins in some way to grasp ideas clearly.

//applying our mixin classes to text
h6 {
    .text(11px);
}
h1 {
    .text(16px);
}

Just note that we want to apply some smaller font-size to our h6 so we just provided 11px value which is less than 14px. So, In this case our guard becomes false and styles will be applied of second branch like font-weight italic and color green etc. While h1 is taking value 16px that value is greater than 14px so h1 will get font-weight bold and color orange. In this way we can use guarded mixins based on expressions rather than values or keywords.

Less provides other operators as well to be used in guarded mixins. As we just used greater than operator “>” in same way we can use less than operator “<”, equal to “=” operator, less than and equal to operator etc as well. While less also provides true and false operators, which can save a lot of time and provides more control to us. All these operations can be used in same way as we used greater than operator. I am not using these operators as I am leaving it for you to practice.

Guarded mixin with true and false operators

Now we’ll be using true and false operators in our mixins and will be closing our today’s lesson.

//creating a mixin and providing guard values to that mixin
.largetext(@size) when (@size = true) {
    font-size: 36px
}
//creating another mixin to be applied if guard gets false value in above mixin
.largetext() {
    font-size: 24px;
}
//using above mixin 
h1 {
    .largetext(true);
}
h4 {
    .largetext();
}

In above code snippet, we just created our mixins and provided a guard, which says if @size gets value true then apply font-size of 36px otherwise apply font-size of 24px. Point to note here is that in second mixin we are not providing any value (variable) in our mixin, which is not required too. Because our first mixin will only get required results if that value is true so once that value is false we don’t need to provide any value in second mixin and we did same.

Now our h1 as getting true value will be having 36px font size while h4 possessing false value hence 24px font-size. So today we covered an other very interesting feature of less, and we are getting very close to finish our less tutorial. Now it depends on you that how much you practice? We’ll be in touch shortly with another feature of less.

We shared our knowledge, now you share with your fellows.

Akram is a professional web developer and SEO expert, having more than 5 years of web development and SEO experience, Akram is the founder of xtractweb.com. For Freelance web developer and SEO services Follow Akram on Google+ and twitter

One Comment

  1. We’re a group of volunteers and starting a
    new scheme in our community. Your website offered us with valuable information to work on.
    You have done an impressive job and our entire community will be
    grateful to you.

Leave a Reply

Your email address will not be published. Required fields are marked *


four + = 11

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>