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:
- Site oficial do Sass
- Alura: Criando componentes CSS com padrão BEM
- Minha experiência pessoal com a ferramenta 💜
Thanks, Matheus Gondra pelo questionamento que me fez escrever esse post!
Top comments (2)
Gostosinho 🤣 👍🏽
Estilizar com Sass, gostoso demais, huahuahua!