Artigos de Tecnologia e Negócios > Front-end

Criando pseudo-elementos mais rapidamente com Sass

Natan Souza
Natan Souza

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.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana