O que é e porquê usar Sass
Tags: braziliandevs, css, webdev, programming
Published: 2023-03-15 13:55:11

Esses dias estava trocando ideia sobre Front-End com uns parceiros de comunidade tech e, em certo momento, surgiu a seguinte pergunta:

> _"Qual o motivo de usar Sass em vez do <abbr title="Cascading Style Sheets">CSS</abbr> puro?"_

A primeira resposta que surgiu  foi _"Sass é mais 'gostosin'."_ e eu concordo plenamente! 😁

Imediatamente após essa pergunta eu simplesmente entrei num frenesi pra justificar porquê o **Sass** realmente é _"gostosin"_. E, de repente, eu me dei conta de que eu praticamente escrevi um post inteiro em resposta à pergunta no Discord, então resolvi pegar todos esses pontos e trazer de forma mais organizada aqui pra vocês. _Bora_ lá?

> _**Sumário**_
> _[O que é Sass](#o-que-é-sass)_
> _[Sintaxes](#sintaxes)_
> _[Nesting](#nesting)_
> _[Variáveis e partials](#variáveis-e-partials)_
> _[Mixins](#mixins)_
> _[Funções](#funções)_
> _[Como usar](#como-usar)_
> _[E pra terminar](#e-pra-terminar)_

<figure>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ftdonve97d2rlw1vro2.gif)
<figcaption>Sass! Sass! Sass!</figcaption>
</figure>

---

### O que é Sass

Segundo [a própria documentação](https://sass-lang.com/documentation/), o **Sass** é "uma linguagem de folha de estilos que é compilada para CSS", o que nós chamamos de pré-processador. Isso significa que tudo que você escrever na sintaxe do **Sass** (ou em *Scss*, veremos isso mais à frente) vai ser convertido em CSS para ser entendido pelo browser. E é por isso que muita gente não entende quais as vantagens de usar esse pré-processador, já que, no fim das contas, tudo vai virar CSS.

Porém, a grande vantagem do Sass é que, justamente por ser um pré-processador, ele nos permite usar <mark>variáveis, aninhamentos, mixins e funções</mark> para escrever código de forma mais limpa, rápida e com mais aproveitamento!

---

### Sintaxes

Uma boa parte da facilidade do uso do Sass é que ele suporta duas sintaxes, garantindo que vai agradar todas as tribos. O nome **Sass** é um acrônimo de _Syntactically Awesome Style Sheets_ (ou Folhas de Estilo Sintaticamente Incríveis, em português) e aqui vamos ver um pouco do porquê isso é verdade!

Pra quem gosta da sintaxe do CSS puro, é possível usar a sintaxe <mark>Scss</mark>, onde os arquivos possuem a extensão `.scss` e é a forma mais popular de uso, justamente pela proximidade entre ambos. Já pra quem prefere algo um pouco mais "limpo", a sintaxe <mark>Sass</mark> recebe a extensão `.sass` e não trabalha com `{}` ou `;`, mas apenas com **indentação**:

```scss
/* SCSS */
.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
  &:hover {
    border: none
  }
}
```
```sass
/* SASS */
.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8
  &:hover
    border: none
```

---

### Nesting

Algo muito legal de notar nos exemplos acima é que o Sass evita repetição de declaração de seletores quando você precisa chamar [pseudo-classes ou pseudo-elementos](https://dev.to/sucodelarangela/entendendo-css-pseudo-classes-e-pseudo-elementos-b83) com o uso do seletor `&`, que é usado pra fazer uma <mark>combinação dos seletores</mark>, o que chamamos aqui de **_nesting_** (ou aninhamento). E esse mesmo seletor faz com que o Sass seja uma excelente combinação com a [metodologia BEM](https://www.alura.com.br/artigos/criando-componentes-css-com-padrao-bem):

```sass
.accordion
  max-width: 600px
  margin: 4rem auto
  width: 90%
  font-family: "Raleway", sans-serif
  background: #f4f4f4
  /* estilos para .accordion__copy */
  &__copy
    display: none
    padding: 1rem 1.5rem 2rem 1.5rem
    color: gray
    line-height: 1.6
    font-size: 14px
    font-weight: 500
    /* estilos para .accordion__copy--open */
    &--open
      display: block
```

E assim como você usa o seletor `&`, você também pode usar quaisquer outros [seletores do CSS](https://www.w3schools.com/cssref/css_selectors.php), como `>`, `+`, `~`, entre outros.

---

### Variáveis e partials

O uso de variáveis no Sass é tão simples quanto no CSS, apenas com uma sintaxe um pouco diferente: enquanto que no CSS usamos `--nome: valor`, quando trabalhamos com Sass, usamos `$nome: valor`, com um `$` na frente.

Quanto à **onde** declarar essas variáveis, no Sass a boa prática é criar um **partial**, que nada mais é que <mark>um arquivo "parcial" de estilização que você pode usar dentro de outros arquivos `.sass`.</mark> Dessa forma, _partials_ também são excelentes para modularizar sua estilização!

Os arquivos **partials** são nomeados com um `_` no começo, (i.e. `_variables.sass`), o que indica para o Sass que estes arquivos não devem ser compilados para CSS a nao ser nos arquivos em que forem utilizados. Para usar os _partials_ em seus arquivos Sass, usamos a regra `@use`:

```sass
/* Partial _variables.sass */
$roboto: 'Roboto', sans-serif
$blue: #60CFFA

/* Arquivo style.sass */
/* Ao importar as variáveis, não é necessário indicar o _ na frente do nome do arquivo (e em alguns casos, nem a extensão) */
@use 'variables.sass'
.search
  display: flex
  gap: 16px
  width: 100%
  div
    font-family: variables.$roboto
    width: 100%
  button
    color: variables.$blue
    border-color: variables.$blue
```

---

### Mixins

Sabe quando você precisa estilizar várias coisas semelhantes no CSS e seu trabalho acaba ficando meio chato? E não apenas chato, mas o excesso de repetição vai gerar um código muito mais longo e complicado de gerenciar no desenvolvimento.

Um **mixin** é uma forma de você <mark>criar blocos de declarações CSS reutilizáveis,</mark> mantendo o seu código muito mais limpo e fácil de manter.

Os **mixins** também são declarados em um _partial_ (normalmente `_mixins.sass`) e utilizados também com a regra `@use` onde necessário. Para declarar um _mixin_, usamos a diretiva `@mixin`, que recebe um nome e que pode até receber parâmetros pra deixar seu código mais reutilizável ainda!

Para usar um _mixin_, usamos a diretiva `@include`, seguida do nome do _mixin_ e seus parâmetros, se houver. Abaixo tem um exemplo de _mixin_ bem legal pra estilização de pseudo-classes de links:

```sass
/* Partial _mixins.sass */
@mixin links ($link, $visited, $hover, $active)
  &
    color: $link
    &:visited
      color: $visited
    &:hover
      color: $hover
    &:active, &:focus
      color: $active

/* Arquivo style.sass */
@use 'mixins.sass'

a
  @include links(orange, blue, yellow, teal)

```

O código Sass acima, quando compilado para CSS, resulta em:

```css
a {
  color: orange;
}
a:visited {
  color: blue;
}
a:hover {
  color: yellow;
}
a:active, a:focus {
  color: teal;
}
```

---

### Funções

E por último, talvez uma das partes mais legais do Sass, é que ele permite a criação de **funções** na sua estilização, que aumentam muito a capacidade de reutilização de código por parte desse pré-processador!

[De acordo com a própria documentação](https://sass-lang.com/documentation/at-rules/function), as funções <mark>"permitem que você defina operações complexas [..] que você pode reutilizar em seus estilos", facilitando a abstração de fórmulas e comportamentos.

Para usar funções, usamos a diretiva `@function`, que recebe um nome e argumentos. Dentro dessas funções, é possível utilizar `@if`, `@else`, `@for`, `@each`, `@while`, `@return`, além de outras coisas. Você também consegue usar essas diretivas **fora** de funções. _Bora_ ver um exemplo:

```sass
/* declarando a função */
@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base
  @return $result

/* usando a função */
.sidebar
  float: left
  margin-left: pow(4, 3) * 1px
```
```css
/* Resultado compilado em CSS */
.sidebar {
  float: left;
  margin-left: 64px;
}
```

---

### Como usar

Para usar **Sass** em seu projeto, é necessário instalá-lo globalmente com o comando `npm install -g sass` ou `yarn global add sass`. Dessa forma, você conseguirá criar seus arquivos `.sass` ou `.scss` e fazer a compilação para CSS, que será a estilização compreendida e renderizada pelo _browser_.

Se você estiver trabalhando sem bibliotecas ou frameworks (i.e. com JavaScript puro), para realizar a compilação de Sass em CSS, você precisa usar o comando `sass --watch <input folder>:<output folder>` no seu terminal, onde `<input folder>` é a pasta que contém os seus arquivos `.sass` e `<output folder>` é a pasta onde serão salvos os arquivos CSS compilados. <mark>Não esqueça de adicionar a tag `<link>` desses arquivos CSS no `<head>` do seu HTML.

Ao rodar o comando acima, sempre que você salvar uma nova alteração em seus arquivos `.sass`, as modificações serão automaticamente compiladas para CSS e refletidas no _browser_.

Agora, se você já trabalha com bibliotecas ou frameworks, como React, Vue ou Angular, então não é preciso fazer o comando `sass --watch`! Essas ferramentas já vem com suporte para pré-processadores CSS e vão lidar automaticamente com a compilação dos estilos! 😉

---

### E pra terminar

O que eu falei por aqui é apenas um pequeno vislumbre das possibilidades que o **Sass** oferece. Existem várias outras diretivas que podem ser utilizadas, a forma como ele manipula os argumentos das funções também é variada e também é possível estender estilos de uma classe para outra, o que também é muito útil.

Mas mesmo que você não queira ou não tenha interesse em utilizar funções e outros aspectos mais avançados, e quiser se manter apenas no uso da sintaxe mais limpa, das variáveis e dos mixins, eu tenho certeza que você já vai curtir bastante o aumento da sua produtividade com estilizações!

No fim das contas, o **Sass** não se autodenomina "CSS com Superpoderes" à toa. Um xero pra vocês!

---

**_Fontes:_**
- _[Site oficial do Sass](https://sass-lang.com/)_
- _[Alura: Criando componentes CSS com padrão BEM](https://www.alura.com.br/artigos/criando-componentes-css-com-padrao-bem)_
- _Minha experiência pessoal com a ferramenta 💜_

_Thanks, [Matheus Gondra](https://www.linkedin.com/in/matheus-gondra-a187a81a3/) pelo questionamento que me fez escrever esse post!_