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:
@mixin mix {
width: 100px;
height: 100px;
}