MENU


Parametric Mixins

In Less, mixins can take in parameters and behave like functions.
Mixins with the same name can be defined multiple times. When applying such a mixin, all applicable mixins will be substituted. 
.m(@color) {
   color: @color;
}
.m(@color; @padding: 2px) {
  background: @color;
  padding: @padding * 2;
}
.m(@color; @padding; @margin: 2px) {
  border: 1px @color solid;
  margin: @margin (@margin+@padding) @margin (@margin+@padding);
}
div {
   .m(green);
}
span {
   .m(@padding:3px; @color:red; @margin:5px)
}

div {
  color: #008000;
  background: #008000;
  padding: 4px;
}
span {
  border: 1px #ff0000 solid;
  margin: 5px 8px 5px 8px;
}
@arguments matches the entire arguments list. @rest matches the remaining arguments list. 
.m (@a; @b; @c:5px; @d:10px){
   margin: @arguments;
}
div {
   .m(1px,2px);
}

.n (@a; @rest...){
   margin: @a @rest;
}
span {
   .n(1px, 2px, 3px, 4px);
}

div {
  margin: 1px 2px 5px 10px;
}
span {
  margin: 1px 2px 3px 4px;
}