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.

    Join the discussion

    Want to have your say on this topic? Start by posting your comment below...

    Can we help?

    We are a digital agency, specialising in web design, development, hosting and digital marketing. If you need help with anything, feel free to reach out...

    Required
    Required
    Required

    Keep up to date

    Call us