O que é e porquê usar Sass

#braziliandevs #css #webdev #programming

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 CSS 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
Sintaxes
Nesting
Variáveis e partials
Mixins
Funções
Como usar
E pra terminar

O que é Sass

Segundo a própria documentação, 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 variáveis, aninhamentos, mixins e funções 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 Scss, 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 Sass recebe a extensão .sass e não trabalha com {} ou ;, mas apenas com indentação:

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

/* 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 com o uso do seletor &, que é usado pra fazer uma combinação dos seletores, 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:

.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, 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 um arquivo "parcial" de estilização que você pode usar dentro de outros arquivos .sass. 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:

/* 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ê criar blocos de declarações CSS reutilizáveis, 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:

/* 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:

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, as funções "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:

/* 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

/* 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. 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: