Mixins

If you are using the same chunk of css in within multiple classes, mixins allow you to create one class which you then "mix in" to the others. Some mixins have already been added to the file mixins.less within the theme which can be used throughout your code. For example, if you are using an element which has a shadow on the box and the text, which you want to override, you could write:

.name-of-class{
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     -webkit-text-shadow: none;
     -moz-text-shadow: none;
     text-shadow: none;
}

but the following mixin is already set up within the mixin.less file

.clear-shadow(){
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     -webkit-text-shadow: none;
     -moz-text-shadow: none;
     text-shadow: none;
}

so within your class you can just write:

.name-of-class{
     .clear-shadow();
}

to achive the same result.

You can create new mixins throughout your theme to make it easier to reuse code. Adding () at the end of the class name prevents the mixin being output to the css before it is used, although you can leave these off if you would like the default mixin to be part of the css.

To keep things organised in most cases please add new mixins to the bottom of the mixins.less file of your css.

In addition to the mixins within the mixins.less file, there are also some which are included in bootstrap by default

http://getbootstrap.com/css/#less-mixins-vendor
http://getbootstrap.com/css/#less-mixins-utility

Or you can read more about creating your own mixins at http://lesscss.org/features/#mixins-feature