Criando pseudo-elementos mais rapidamente com Sass
Usando o :after
ou o :before
. E sempre acabamos colocando certas delarações CSS nesses elementos, como no código abaixo:
.meu-pseudo-elemento:before {
content: "";
display: block;
position: absolute;
}
Na maioria dos casos, usamos essas declarações, meio chato ficar repetindo código, não?
Repetição de código no CSS é um trabalho que o Sass tira de letra, usando o recurso de mixins. Pense em um mixin como uma espécie de função, um trecho de código que você pode repetir em vários lugares apenas o invocando.
@mixin pseudo{
content: '---';
display: inline-block;
}
p:after { @include pseudo; }
span:after { @include pseudo; color: blue; }
Esse código depois de compilado no Sass, resulta no seguinte CSS:
p:after { content: '---'; display: inline-block; }
span:after { content: '---'; display: inline-block; color: blue; }
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:
@mixin pseudo($content, $display){
content: $content; display: $display;
}
Agora basta que, ao incluírmos esse mixin em uma regra CSS, passarmos esses parâmetros, como por exemplo:
.submenu > a:after { @include pseudo(">", inline-block);
margin-left: .5em; }
O código acima depois de compilado resulta no seguinte código CSS:
.submenu > a:after {
content: ">";
display: inline-block;
margin-left: .5em; }
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.