Questions tagged [less-mixins]

Any selector with a group of CSS properties can be referred to as a mixin. Using mixins allow users to inherit/embed properties of one selector into another by just calling it within the selector which needs to inherit the properties.

.default-props{ /* a simple mixin */
  font-size: 16px;
  letter-spacing: 1em;
  color: black;
  padding: 4px;
}

div, p{
  .default-props; /* mixin call will assign all default properties to div and p tags */
}

When the mixins are defined, the parentheses are optional. But when parentheses are used, the base mixin itself is not output in the compiled CSS.

Mixins can also accept input parameters and behave like functions. The parameters that are passed can be used to assign values to properties (or) in guards to help in decision making etc.

.padding-gen(@gutter-size; @direction){
  & when (@direction = all){ /* guards for decision making */
    padding: @gutter-size; /* value assignment */
  }
  & when not (@direction = all){
    padding-@{direction}: @gutter-size;
  }
}

/* mixin usage */

div#demo{
  .padding-gen(4px; all);
}
p#demo2{
  .padding-gen(2px; left);
}

Reference Links:

• Official Documentation from the Less Website
• Less - Wikipedia Page

Collection of Common & Useful Mixins:

• Less Elements
• Less Hat
• Useful Less Mixins - CSS Tricks