Criando pseudo-elementos mais rapidamente com Sass

Esse código depois de compilado no Sass, resulta no seguinte CSS:

Você pode testar esses códigos Sass facilmente no SassMesteir ou no Codepen. Conheça o que é o Codepen e como usar ele!

Bacana, mas será que todos os pseudo-elementos que vou criar terão exatamente o mesmo conteúdo? O mesmo display? Talvez sim, talvez não. Melhor preparar para o pior caso, certo? É com esse cenário em mente que podemos passar parâmetros na criação do mixins. Analisemos o código da criação de um mixin com essa ideia:

Agora basta que, ao incluírmos esse mixin em uma regra CSS, passarmos esses parâmetros, como por exemplo:

O código acima depois de compilado resulta no seguinte código CSS:

Maravilha, não? Um exemplo real seria para fazer um sub-menu, para criar aquela setinha que fica do lado:

See the Pen AXdBOY by Natan Souza (@designernatan) on CodePen.

E se esses valores do content e do display forem repetidos muitas vezes, podemos facilitar (mais) a nossa vida, passando valores default nesses parâmetros:

See the Pen pseudo-elemento-com-mixin-parametros by Natan Souza (@designernatan) on CodePen.

Eu mostro diversas dessas features com um projeto na prática para você aprender pré-processadores CSS no meu livro de Sass, da Casa do Código:

E clicando na imagem ou aqui nesse link você ganha 10% de desconto, e vale para qualquer livro!

Se você for aluno na Alura, o conteúdo do livro está no meu curso online de Sass também.