O que é SASS: Aprenda CSS com Poder e Sofisticação

Tempo de leitura: 4 minutos

Olá desenvolvedor, tudo tranquilo?
Depois do grande sucesso do nosso artigo sobre pré-processadores CSS, hoje vamos falar especificamente sobre o SASS, que é um pré-processador CSS que adiciona poder e sofisticação ao CSS básico.

E caso você não saiba muito bem o que é um pré-processador CSS, vou deixar o link do nosso guia definitivo sobre pré-processadores.

>> Pré-processadores CSS – O Guia Definitivo

O que iremos aprender em nosso artigo de hoje?

// O que é SASS

// Como instalar o SASS

// Variáveis

// Aninhamento

O que é SASS

O Sass é uma linguagem baseada em CSS que depois de compilada gera o bom e velho CSS.

Possui duas sintaxes diferentes, o SASS e o SCSS.

O SCSS é a que acho mais interessante pela sua semelhança com CSS padrão, a outra é atrelada a indentação.

Ele é uma Gem do Ruby, ou seja, uma biblioteca escrita em linguagem Ruby. Esse pré-processador permite que você use variáveis, regras aninhadas, mixins, importações e muito mais, tudo com uma sintaxe totalmente compatível com CSS.

Como instalar o SASS

Antes de poder usar o Sass, você precisa configurá-lo em seu projeto. Se você quiser apenas ler o post, fique a vontade, mas recomendo que você instale o Sass primeiro. Vá aqui se você quiser aprender como configurar tudo.

Para desenvolver os primeiros scripts utilizando o Sass você necessita instalar o Ruby, para usuários de MAC não é necessário pois já vem instalado nativamente. Os detalhes para a instalação podem ser acessados no site da linguagem: www.ruby-lang.org.

Após a instalação do Ruby, faz-se necessária a instalação do Sass, para isso basta executar o seguinte comando:

gem install sass

Mais detalhes da instalação aqui nesse link >> sass-lang.com/install.

Variáveis

Pense nas variáveis ​​como uma maneira de armazenar as informações que você deseja reutilizar em toda a folha de estilo.

Você pode armazenar itens como cores, pilhas de fontes ou qualquer valor CSS que achar que deseja reutilizar. Sass usa o $ símbolo para transformar algo em variável. Aqui está um exemplo:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Quando o Sass é processado, ele leva as variáveis que definem para o $font-stack e $primary-color e saídas normais CSS com os nossos valores de variáveis colocados no CSS. Isso pode ser extremamente poderoso ao se trabalhar com as cores da marca e mantê-las consistentes em todo o site.

Aninhamento

Ao escrever HTML, você provavelmente notou que ele possui uma hierarquia visual e aninhada clara. CSS por outro lado não.

O Sass permitirá aninhar seus seletores de CSS de uma maneira que segue a mesma hierarquia visual do seu HTML. Esteja ciente de que regras excessivamente aninhadas resultarão em CSS super qualificado que pode ser difícil de manter e geralmente é considerado uma má prática.

Com isso em mente, veja um exemplo de alguns estilos típicos para a navegação de um site:

SASS

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Você notará que os seletores ul, li e a são aninhados no interior do nav. Essa é uma ótima maneira de organizar seu CSS e torná-lo mais legível.

Conclusão de pré-processadores CSS



Usar pré-processadores Sass é uma realidade no mercado, podendo ser facilmente encontrado em projetos open source, seja de front-end ou de back-end, e geralmente é exigido como requisito para oportunidades de emprego.

Gostou de aprender o que é SASS e como aplicá-los em seus projetos? Tenho uma notícia ainda melhor para você que deseja evoluir como desenvolvedor!