Sass

Sass é um preprocessador: você escreve um dialeto e um programa gera CSS comum. O navegador não lê .scss. Neste capítulo você estuda o par de arquivos: o SCSS de referência e o CSS já compilado. Não é obrigatório instalar compilador.

O que você vai aprender

• Distinguir Sass indentado, SCSS e Less.
• Trocar uma cor em $variavel e ver o CSS gerado.
• Aninhar seletores com no máximo três níveis.
• Reaproveitar um mixin (por exemplo o foco visível).
• Comparar @extend e mixin.

Por que existe preprocessador

Repetir #c0392b em vinte regras cansa e erra. Variável, mixin e aninhamento organizam o arquivo. No fim, o que entra no site é CSS.

Se você não quer ferramenta extra, edite só o .css. O .scss deste exemplo é material de estudo.

Pare e experimente. Abra estilos.scss e estilos.css lado a lado. Copie a declaração $papel no SCSS e mude apenas a cor. Preveja se a página mudará, recarregue e confira: o HTML liga o CSS, não o SCSS. Restaure.

Sass, SCSS e Less

SCSS aceita CSS colado dentro. É o caminho mais calmo para quem já leu os capítulos 6 a 13.

Pare e experimente. Copie o endereço href do link CSS para uma anotação. Mude só a extensão para .scss na cópia do HTML, preveja a perda do estilo, recarregue e confira. Devolva .css antes de avançar.

Variáveis

$papel: #f4f1ea;
$tinta: #2b2a29;
$destaque: #c0392b;

body {
  background: $papel;
  color: $tinta;
}

a {
  color: $destaque;
}

CSS gerado:

body {
  background: #f4f1ea;
  color: #2b2a29;
}

a {
  color: #c0392b;
}

Melhor ainda: $cor-principal: $destaque; — você muda o papel da cor, não o nome da tinta.

Pare e experimente. Copie $destaque no SCSS de estudo. Mude só o valor e preveja se a página mudará sem gerar CSS. Recarregue e confira. Depois altere o valor correspondente no CSS para simular a geração e compare.

Aninhamento

.menu {
  display: flex;

  a {
    color: $tinta;

    &:hover,
    &:focus-visible {
      color: $destaque;
    }
  }
}

& é o seletor pai. Três níveis já bastam. Aninhar a página inteira gera seletores enormes e frágeis.

Pare e experimente. Copie o bloco .menu com a regra aninhada. Mude apenas $tinta para $destaque dentro de a. Preveja quais links seriam afetados; compare com .menu a no CSS gerado. Para conferir no navegador sem compilador, altere apenas a regra correspondente no CSS de teste e depois restaure.

Mixins

Mixin é um bloco com nome que você inclui onde precisar. Serve para trechos que se repetem e podem aceitar argumentos.

@mixin foco-visivel {
  &:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
  }
}

a,
button {
  @include foco-visivel;
}

Pare e experimente. Copie o mixin foco-visivel e mude apenas a espessura de 3px para 4px. Preveja as regras geradas nos lugares que o incluem. Simule a mesma alteração no CSS de teste, recarregue e confira o botão com Tab. Restaure.

Extend

@extend junta seletores que compartilham o mesmo conjunto de propriedades. É fácil criar CSS surpresa se você estender classes demais. Prefira mixin quando o trecho precisa de parâmetro ou aparece em contextos distintos.

O exemplo 14-sass traz estilos.scss e estilos.css. Mude $destaque no SCSS com o olho e altere o valor correspondente no CSS compilado — assim você simula o compilador à mão. Se um dia instalar Sass, o comando fica a seu cargo; o volume não depende dele.

Pare e experimente. Copie para uma anotação .base { color: navy; } e .aviso { @extend .base; }. Preveja o CSS gerado. Digite no CSS de teste .base, .aviso { color: navy; }, aplique class=“aviso” a um parágrafo e confira. Retire o teste; o navegador não lê @extend.

Atividades

1. O navegador abre estilos.scss? O que ele precisa?
2. Por que $cor-principal: $destaque é mais flexível que espalhar $destaque?
3. Qual o risco de aninhar sete níveis?
4. Mixin ou extend para um foco visível reutilizável? Por quê?

Respostas comentadas

1. Não. Ele precisa do CSS gerado (estilos.css) ligado no HTML.
2. Você troca o papel “cor principal” uma vez, sem caçar o nome da tinta em cada regra.
3. Seletores longos, específicos demais, difíceis de sobrescrever.
4. Mixin: o trecho se repete em a e button e pode ganhar parâmetro de cor depois. Extend misturaria os seletores sem ganho claro.

O arquivo completo

Referência do exemplo 14-sass, reproduzida aqui para que você possa conferir sem sair da página.

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}