Mixins em SASS

Nesta lição, conheceremos 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 atua como um template - um trecho de código específico que podemos usar em muitos lugares.

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

Para declarar mixins, usa-se a diretiva @mixin, após a qual especificamos seu nome, parâmetros e o bloco com o corpo:

styles.scss@mixin mix {
  width: 100px;
  height: 100px;
}