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.

Article by David Reeder. LinkedIn Profile: https://www.linkedin.com/in/david-e-reeder/