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's in this article

    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.

    Who are we?

    We are a digital agency specialising in Web Design, Development, Concrete5 and digital marketing, based in London & West Sussex.

    We make digital simple. Our purpose is to simplify your frustrations in digital and solve the challenges you face to help make you more money and progressively grow your business or organisation.

    Tell me more

    Keep up to date

    June special offer...

    FREE hosting in year one

    We'll give you FREE hosting when you buy a website from us. The hosting includes full 24x7 UK support, FREE SSL cert, FREE domain, daily backups and is optimised for high levels of speed and security. Worth up to £480 a year!

    Tell me more
    Call us