Essa é a parte dois do meu aprendizado com o pré-processador SASS, se você não viu a parte 1 ela se encontra aqui.
Quero falar de uma propriedade muito da show de bola pra quem escreve um CSS organizado:
@extend. Para usar o @extend é super simples, só coloar @extend seletor. Se for uma classe ficaria @extend .classe, e se for uma id ficaria @extend #id. Ela é colocada dentro de um seletor qualquer e copia todas as propriedades de outro seletor escolhido para o que ela está dentro. Parece ser um crtl + c, crtl + v automátizado. Pra nós que estamos escrevendo é, mas o resultado final do CSS não fica como se o código tivesse sido copiado no outro seletor e sim o seletor original que foi selecionado recebe outro seletor, o seletor que a função do SASS extend foi colocado. Complicou um pouco agora neh? Bom, isso são só aspectos técnicos mesmo, que só é preciso saber se der algo errado. Vamos para o que interessa:
Temos o código original que queremos botar em outro lugar
O extend em uso para "copiar" tudo dentro da classe .eventos-corpo-texto e ainda adicionar abaixo o padding-left.
e esse é o CSS puro gerado ao final.
E agora para a função que é a garota dos olhos do SASS, a que todo mundo acha super maneira e útil, mas que eu ainda não usei. Os Mixins
- Falta de oportunidade?
- Não sei bem como usar?
- Preguiça?
Todas as alternativas acima. Eu sei que os mixins são úteis, mas ainda não consegui me apegar de verdade. Vamos ao que interessa. Os mixins são o equivalente de funções de programação utilizando CSS. Maneiro demais. Os mixins são como as variáveis do SASS, você tem que declara-las antes pra poder usar dentro de algum seletor. A sintaxe do mixin é a seguinte.
Para declarar: @mixin nome($parâmetro){ propriedade: atributo ou $parâmetro; }
E pra usá-lo: seletor {@include nome(parâmetro) }
De todas as coisas que o SASS faz mixin talvez seja a mais fácil de usar e difícil de explicar. Primeiro, o nome é você que escolhe, pode ser qualquer um. Melhor botar algum que seja fácil de lembrar neh? Não algo do tipo bunda de urano (a não ser que isso seja bem auto-explicativo pra sua mixin, sem julgamentos). O parâmetro é opcional e pode existir mais de um, mas nunca vi mixin que não precisasse de parâmetro, depois vou mostrar os exemplos de uso que eu tenho. As propriedades são o que vão definir de verdade o mixin. Vamos para exemplos!
O primeiro mixin converte fontes pt para em. O segundo coloca border-radius igual para todos os navegadores para evitar erros. O terceiro bota vários parâmetros para criar uma box-shadow igual para todos os navegadores.
Aqui escolhemos o seletor universal e incluimos nossos mixins.
Os mixins geram esse resultado acima.
O SASS tem mais de um jeito de ser utilizado, tem algumas manhas e agiliza bastante a escrita de css (além de causar menos estresse do que escrever css normal). Existem na verdade duas formas de escrever com SASS, o mais utilizado e padrão .scss (todos os exemplos que dei foram nisso) e o .sass, que realmente muda a forma de escrever css. Mais sobre isso no próximo post, juntamente com instalação e formas de usar. A Parte 03 pela glória será a última, até porque ninguém aguenta mais!
Abraços, Matheus Beltrão
Comentários
Postar um comentário