O Superpoderoso Sass
Tags: css, design
Published: 2020-10-01 23:59:29

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.

![Alt Text](https://media.giphy.com/media/D7z8JfNANqahW/giphy.gif)

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?

![Alt Text] (https://media.giphy.com/media/5TC1o3oRE68Mg/giphy.gif)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/shah8u1v18da35vckkrr.PNG)

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 $:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/boj6kf4udvzi5d43vcx0.PNG)

Depois de atribuir os valores, podemos simplesmente chamar essas variáveis sempre que for preciso:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/totdmb070ar6uii46tys.PNG)

**Mixins**

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a4p9bkoxb4qdm9x0e3jy.PNG)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7i33pti43ram9ob526lw.PNG)

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

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d4oi75cdkcwdk489kx97.PNG)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nmznuf34zvfp16w86z4y.PNG)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oho4c14h8s6zng5zg9ha.PNG)

**Aninhamentos**

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2t4fewkat2hel2a3tvb1.PNG)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q1po3plljqw3j3v4yvfd.PNG)

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:

{% youtube XwPSWKnZIg4 %}

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

![Alt Text] (https://media.giphy.com/media/fWgAW7WZtPMBjmpa3V/giphy.gif)