destaque pseudo elementos com sass

Criando pseudo-elementos mais rapidamente com Sass

Quando vamos criar um elemento que só possui finalidade visual, criamos um pseudo-elemento em nosso CSS 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.

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:

Livro Sass - Aprendendo pré-processadores CSS - Natan Souza

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.

Conhece algum outro uso bacana dos mixins?
Compartilha aí nos comentários!


Bacharel em Design Digital, atua na área de web há cerca de cinco anos. Já trabalhou também com animação e edição de vídeo. Atualmente desenvolve e ensina front end e UX Design na Caelum. Ama tecnologia, front end, design, jogos e coisas revolucionárias.

Próximo ArtigoO que pode significar a taxa de conclusão?