Top Lines

Powerful Less Mixins

by Dave Reeder , 05 April 2017

Dave Reeder
Powerful Less Mixins
Less and Sass really make writing lots of CSS much quicker and easier and one of the most important features is the "mixin". Here's...

What is a Mixin?

Mixins allow you to write much faster code. Consider this CSS:

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

At least three lines of CSS are written just for one simple transform. With less, you can use mixins that make life much easier:

div {
    .transform(translate(50px, 100px));
}

Hang on, what about hose vendor prefixes? Well, we have a mixin higher up in our code for the .transform that you see above.

The mixin looks like this:

.transform(@string) {     
    -webkit-transform: @string;    
    -moz-transform:    @string;    
    -ms-transform:     @string;    
    -o-transform:      @string;
}

You can now see where all those vendor prefixed expressions come from, and we are just passing a value in the brackets for @string.

Another Example of a Mixin

Here is another example of a mixin for border radius:

.border-radius (@radius: 5px) {    
    -webkit-border-radius:  @radius;    
    -moz-border-radius:     @radius;    
    border-radius:          @radius;
}

Notice the text @radius, that will be out number that we plug into the mixin. However, we also have 5px in there. This is because we have set a default border-radius with this mixin so if we just put:

.border-radius();

We get a border radius of 5px! Yet more time and effort has been saved by using this mixin, how great is that?

List of Less Mixins

Here is a list of mixins I regularly use. Note, there are more out there available too.

.transition(@transition) {    
    -webkit-transition:     @transition;      
    -moz-transition:        @transition;    
    -ms-transition:         @transition;     
    -o-transition:          @transition;  
}

.transform(@string) {     
    -webkit-transform:      @string;    
    -moz-transform:         @string;    
    -ms-transform:          @string;    
    -o-transform:           @string;
}

.opacity(@opacity: 0.5) {    
    -webkit-opacity:       @opacity;    
    -moz-opacity:           @opacity;    
    opacity:                @opacity;
}

.box-shadow(@string) {    
-webkit-box-shadow:     @string;    
-moz-box-shadow:        @string;    
box-shadow:             @string;
}

.border-radius (@radius: 5px) {    
    -webkit-border-radius:  @radius;    
    -moz-border-radius:     @radius;    
    border-radius:          @radius;
}

.calc(@expression) {       
    width: -moz-calc(@expression);       
    width: -o-calc(@expression);       
    width: -webkit-calc(@expression);       
    width: calc(@expression);
}

.filter(@string) {    
    -webkit-filter: @string; /* Chrome, Safari, Opera */    
    filter: @string;
}

.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
    opacity: 1
  }
  &::-moz-placeholder {
    color: @color;
    opacity: 1
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

.vertical-align(@position: relative) {
    position: @position;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


.centre(@position: relative) {
    position: @position;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {    
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);    
    -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);    
    box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {    
    -webkit-box-sizing: @type;    
    -moz-box-sizing:    @type;    
    box-sizing:         @type;
}

.backface-visibility(@visibility){    
    -webkit-backface-visibility: @visibility;
    -moz-backface-visibility: @visibility;
    -ms-backface-visibility: @visibility;
    -o-backface-visibility: @visibility;            
    backface-visibility: @visibility;
}

It's so easy to write out these mixins there is no excuse for not supporting those older browsers now!

Hope you found this helpful, please feel free to comment and recommend more mixins.

Join the Discussion...


Back to Blog

Get Important News & Offers

Enter your email to receive monthly news and special offers from Made Simple Media:

You can unsubscribe at any time, please read our privacy policy for more information.

Ask a Question...

Please complete the form below to send us a message:

Stay Informed...

Enter your email address to receive occassional emails with special offers, relevant news and useful tips:

Please note, we never share your data with any third party and you can unsubscribe from emails at any time and request that your data is deleted.