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!

Fique por dentro

(Última atualização em: 24 de agosto de 2016)

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?