preprocessor	prefix	mixin declaration	mixin usage
less	@	.my-mixin(){…}	@my-mixin();
sass	$	@mixin my-mixin(){…}	@includ my-mixin();

LESS is kind of obsolete now. It use to be an easy transition with a short learning curve when front-end developpement was starting to be serious. Now, if developpers want simple color variables, CSS vars are now supported in modern browsers for that type of light usage variables. And if we need more logic, SASS preprocessor is more powerfull, allowing better abstraction for fancy functions, and better accepted by the development community.

LESScss

http://lesscss.org/

Mixins syntaxe

Mixin example

.my-mixin( @required-value, @default-value:auto ){
    width: @required-value;
    height: @default-value;
}

// Applying my mixin

.image-1 {
   @my-mixin(); // missing the « @required-value »
}
.image-2 {
   @my-mixin( 100% );
}
.image-3 {
   @my-mixin( 100%, 50% );
}

In this example, the fallback « default-value» , as declared on the first line of the mixin, if not over-rules when applyed, will print auto. At the opposite if a value does not have a fallback value, as our @required-value, example it will generate an error and your LESS Compiler won't execute itself.

// Compiled CSS result

.image-1 {
    !!! ERROR !!! It won't compile since missing a required value.
}
.image-2 {
    width: 100%;
    height: auto;
}
.image-3 {
    width: 100%;
    height: 50%;
}

See my mixin example as reference « CodePen Home PNG Background-image Sprite Fit - LESS mixin »

Loops

http://lesscss.org/features/#mixins-feature-loops-feature