Mixins em LESS

Nesta lição, vamos conhecer os mixins (mistura), que permitem incluir uma classe dentro de outra. Vamos entender o que são e como trabalhar com eles.

Essencialmente, um mixin é o uso de uma classe dentro de outras, onde uma classe é um modelo - um pedaço de código específico, que podemos usar em muitos lugares.

Por que isso é conveniente? Em CSS puro, teríamos que digitar o código do modelo em todos os lugares onde fosse necessário, enquanto em LESS podemos escrevê-lo em um único lugar e depois incluí-lo nos locais de código desejados.

Vamos ver um exemplo. Suponha que temos a seguinte classe:

styles.less.mix {
  width: 100px;
  height: 100px;
}

Vamos usar essa classe como um mixin:

styles.lessp {
  .mix;
  color: red;
}

Como resultado, após a compilação, os estilos da nossa classe serão aplicados ao parágrafo:

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

styles.less.mix {
  color: white;
  background: black;
}

p {
  .mix;
  width: 300px;
}