Let’s Play with LESS Mixins and Gaurd Expressions

Less is a user friendly, dynamic stylsheet languages which approaches CSS preprocessor. As we know the one of the best feature of any CSS preprocessor is the ability to create mixins, which allows to embed all properties of a class into another class by including the class name as one of its properties, as seen in the example below.

  1. .gradient (@startColor: #eee, @endColor: #ffffff) {  
  2.     background: -webkit-gradient(linear, left topleft bottom, from(@startColor), to(@endColor));  
  3.     background: -webkit-linear-gradient(top, @startColor, @endColor);  
  4.     background: -moz-linear-gradient(top, @startColor, @endColor);  
  5.     background: -ms-linear-gradient(top, @startColor, @endColor);  
  6.     background: -o-linear-gradient(top, @startColor, @endColor);  
  7. }  

This takes all of the gradient properies and wraps it up nicely into a single mixin. It can also be implimented with custom values. Now instead of wrting gradient properties eveytime, we just call .gradient mixins to impliment gradient like below.

  1. .topNavigation{  
  2.     .gradient;  
  3. }  

Mixins with Guard expressions

Sometimes, we want to change the behaviour of a mixin, based on the parameters you pass to it. For this LESS equiped with Guards which are useful when we want to match on expressions, It’s just like functional programming.

For example if we wants to manage top navigation from back end to change it to gradient or with background color. Then we can easily handle it using mxins and Gaurd. In below example we will pass values 1 for gradient and 2 for background color.

  1. .gradient (@topNav) when (@topNav=1) {  
  2.     background: -webkit-gradient(linear, left topleft bottom, from(#eee), to(#ffffff));  
  3.     background: -webkit-linear-gradient(top#eee#ffffff);  
  4.     background: -moz-linear-gradient(top#eee#ffffff);  
  5.     background: -ms-linear-gradient(top#eee#ffffff);  
  6.     background: -o-linear-gradient(top#eee#ffffff);  
  7. }  

  1. .gradient (@topNav) when (@topNav=2) {  
  2.     background-color#eee;   
  3. }  

Now we call gradient mixins to apply gradient effect to top navigaton tabs:

  1.  .topNavigation{  
  2.     .gradient(1);  
  3. }  

The above compile into CSS as:

  1. .topNavigation{  
  2.     background: -webkit-gradient(linear, left topleft bottom, from(#eee), to(#ffffff));  
  3.     background: -webkit-linear-gradient(top#eee#ffffff);  
  4.     background: -moz-linear-gradient(top#eee#ffffff);  
  5.     background: -ms-linear-gradient(top#eee#ffffff);  
  6.     background: -o-linear-gradient(top#eee#ffffff);  
  7. }  

Now we call gradient mixins to apply backgorund color to top navigaton tabs:

  1.  .topNavigation{  
  2.     .gradient(2);  
  3. }  

The above compile into CSS as:

  1. .topNavigation{  
  2.     background-color#eee;   
  3. }  

It’s really awesome right? When LESS code is compiled, it’ll comes out as plain old CSS which is much more readable and easily updatable without sacrificing browser compatibility.

About the Author: Jaeeme khan

A web developer who has a love for creativity and enjoys experimenting with various techniques in both web design and development.If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Leave a comment

(You can, of course, unsubscribe at anytime).