Como uma boa desenvolvedora Front End, venho hoje venho falar com vocês sobre uma ferramenta que facilita MUITO as nossas vidas e a nossa produtividade no dia a dia, o superpoderoso Sass.

Por muitos anos o desenvolvimento FrontEnd se limitou ao HTML, CSS e Javascript, porém com o passar do tempo novas tecnologias e ferramentas vêem surgindo. Esse é o caso dos Pré Processadores de CSS.
Mas Amanda, o que é um pré processador?

Pré processador é um programa que tem uma entrada, um processamento e uma saída. A entrada recebe de algum programa um código, o processamento interpreta o mesmo e tem como saída o CSS.
Hoje vamos conhecer o pré processador Sass.
Como a própria documentação do Sass diz, o Sass deixa o "CSS with superpowers", por ser rico em recursos, maduro, grande aceitação, presente na comunidade e inúmeros frameworks construídos em Sass.

Mas vamos ao que interessa, o que o Sass traz de bom?
Nesse artigo vou abordar algumas funcionalidades úteis que podemos fazer com o Sass para deixar o gostinho de quero mais em vocês...

Variáveis
Quando usamos arquivos CSS, muitas vezes precisamos repetir alguns atributos em mais de um seletor:

No Superpoderoso Sass, podemos atribuir esses valores que se repetem em mais de um lugar à variáveis, que por padrão sempre irão iniciar com o $:

Depois de atribuir os valores, podemos simplesmente chamar essas variáveis sempre que for preciso:

Mixins

E quando ao invés dos atributos, os próprios seletores se repetem pelo código, como a seguir?

Nesse caso entra em ação uma diretiva chamada Mixin, que pode ter várias regras e argumentos diferentes. Vamos ver como funciona?
Vamos usar a variável que já aprendemos atribuindo um valor, e criar o nosso primeiro mixin:
Para criar um mixin, sempre iremos incluir o @ juntamente com a palavra reservada mixin, definir o nome desse mixin e passar a regra necessária.

Agora, para incluir o mixin criado nos nossos seletores, vamos usar o @ junto com a palavra reservada include:

Mas e se ao invés de passar o valor de 0.3em para todos os seletores, eu precise colocar algum valor diferente?
Podemos criar mixins passando esses valores por parâmetro. No exemplo a seguir criamos o nosso mixin, passamos uma variável como parâmetro e depois atribuimos na regra essa variável:

Para incluir esse mixin chamamos o mesmo no nosso seletor, e ao invés de atribuir a variável, podemos ai sim atribuir o valor diferente que desejamos por parâmetro:

Aninhamentos

Muitas vezes em nosso CSS, temos algum seletor que tem diferentes regras para diferentes efeitos :

Uma facilidade que o Sass oferece é criar esses seletores e chamar dentro do mesmo as regras necessárias, facilitando a manutenção do código quando trabalhamos com seletores:

Uma boa prática é não ultrapassar três ou quatro itens em cada seletor.

É claro que eu não mostrei nem 10% do poder do Sass, hoje a intenção foi mostrar uma prévia e despertar a curiosidade em você, e se quiser conhecer mais sobre o Sass, super vale a pena xeretar na documentação:

https://sass-lang.com/

Falando de conteúdos Free, no Youtube tem uma playlist maneira para você aprender também:

Por hoje é só, gostou? Tem algum ponto a acrescentar ou até corrigir? Deixa o seu recadinho...
Até o próximo artigo !!!