O que é SASS – Aprenda SASS de Forma Fácil e Prática
Sass é uma linguagem que estende o CSS com variáveis, módulos, mixins, funções e aninhamento. Você escreve arquivos .scss e o Dart Sass os compila em CSS que o navegador entende. Hoje, SCSS é a sintaxe mais comum; para código novo, use o sistema de módulos com @use, não o antigo @import.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que você vai ver hoje?
O que é SASS – CSS com Superpoderes!
Sass (Syntactically Awesome Style Sheets) é uma linguagem de folhas de estilo compilada em CSS. Ela tem duas sintaxes: SCSS, usada em arquivos .scss e compatível com a sintaxe do CSS, e a sintaxe indentada, usada em arquivos .sass.
Neste tutorial, usaremos SCSS e o Dart Sass, a implementação oficial mantida pela equipe do projeto.
Nesta aula, vamos explorar, passo a passo, como instalar, configurar e utilizar os recursos do SASS, começando pelo básico e avançando até funcionalidades como variáveis, mixins e aninhamento.
O que é o SASS?
O Sass é frequentemente chamado de pré-processador CSS porque transforma seus recursos extras em CSS antes de a página chegar ao navegador.
O navegador não interpreta Sass diretamente: você compila o arquivo de entrada e referencia no HTML apenas o CSS gerado.
Descrito como “CSS com superpoderes”, o SASS adiciona funcionalidades como:
- Variáveis: Guarde valores reutilizáveis, como cores ou tamanhos.
- Mixins: Crie blocos de código reutilizáveis.
- Aninhamento: Escreva código CSS de maneira mais intuitiva e estruturada.
- Operações matemáticas: Realize cálculos diretamente no código.
- Funções: Manipule dados de forma dinâmica.
Esses recursos permitem:
- Organização: Divida seu código em múltiplos arquivos pequenos e fáceis de ler.
- Reutilização: Evite repetições com mixins, funções e variáveis.
- Flexibilidade: Trabalhe com estilos de forma dinâmica e inteligente.
Com isso, é possível criar códigos modulares, eficientes e reutilizáveis, tornando o SASS um grande aliado dos desenvolvedores front-end.
Ele é especialmente útil em projetos de grande escala, ajudando a aumentar a produtividade e eficiência. Saiba mais no site oficial do SASS em projetos de grande escala.
Saiba mais no site oficial do SASS: https://sass-lang.com/
Pré-requisitos
Antes de utilizar o SASS, é necessário instalar o Node.js e o npm. O Node.js permite que o JavaScript seja executado fora do navegador, enquanto o npm é um gerenciador de pacotes que facilita a instalação de ferramentas como o SASS.
Basta baixar e instalar o Node.js em seu computador; o npm será instalado automaticamente junto.
Caso tenha alguma dúvida no processo de instalação do Node.js, confira nossa aula: Como Instalar o NodeJS para programação em JavaScript
Para verificar se a instalação foi concluída com sucesso, abra o terminal do seu computador (Prompt de Comando – CMD).
Dentro do terminal digite: node -v
Se um número de versão for exibido, como v22.12.0, significa que a instalação foi concluída com sucesso.
Configuração do Ambiente: Preparando o Visual Studio Code
Além do Node.js, é importante ter um editor de código para criar e editar seus arquivos. Para isso, utilizaremos o VS Code.
Você pode aprender como baixar e configurar o Visual Studio Code em nossa aula: VS Code para HTML e CSS – Como Baixar e Configurar
Com o Node.js e o VS Code instalados, o próximo passo é configurar o ambiente e instalar o SASS.
Comece criando uma pasta para o projeto, ou faça o download do material disponível nessa aula, e abra com o VS Code.
Dentro do editor, acesse o terminal e execute o comando npm init para inciailizar um projeto npm.
Esse comando inicializa um projeto npm. Durante o processo, será solicitado que você atribua um nome ao pacote, como “aula-de-sass”.
Para as demais configurações, pressione Enter até aparecer a mensagem: “Is this OK?”. Então, digite “y” e aperte Enter novamente.
Esse comando criará o arquivo package.json na pasta do seu projeto. Este arquivo organiza as informações do projeto e garante a comunicação entre as bibliotecas e os recursos externos utilizados.
O arquivo package.json inclui informações como o nome, a versão e a descrição do projeto. Além disso, ele é essencial para definir scripts que automatizam a compilação do SASS em CSS, facilitando futuras edições de estilos.
Instalando o SASS
Com o projeto inicializado, podemos instalar o SASS. Abra o terminal no editor e certifique-se de que está na mesma pasta onde está o arquivo package.json.
A instalação pode ser feita globalmente ou como uma dependência de desenvolvimento (dev dependency). Em projetos compartilhados, a dependência local mantém a versão declarada no próprio projeto.
Para esta aula, utilizaremos a segunda opção. Execute o comando npm install -D sass.
Consulte também as formas oficiais de instalar o Sass e a documentação do npm install.
Após a instalação, os módulos necessários serão baixados automaticamente e armazenados na pasta node_modules.
Além disso, outro arquivo importante, chamado package-lock.json, será gerado. Ele garante a consistência das versões dos pacotes instalados.
No arquivo package.json, uma nova seção chamada devDependencies será adicionada, listando as dependências instaladas, incluindo o SASS.
Dica importante: Caso você compartilhe o projeto ou queira movê-lo para outro local, não é necessário enviar a pasta node_modules junto com o código-fonte.
Compartilhe os arquivos package.json e package-lock.json. Com eles, as dependências podem ser reinstaladas sem enviar node_modules; em automações e CI, prefira npm ci para respeitar exatamente o arquivo de lock.
Criando o Arquivo HTML
Com todas as preparações e instalações concluídas, vamos criar um arquivo HTML para visualizar as funcionalidades do SASS.
Dentro desse arquivo, digite ! e pressione a tecla Tab. O VS Code reconhecerá que você deseja criar um arquivo HTML e gerará automaticamente toda a estrutura básica.
Com a base da nossa página pronta, vamos fazer algumas modificações nela. Começando pela tag <title>, vamos mudar o texto para “Minha página com SASS”.
Além disso, dentro da <head>, vamos linkar nosso documento HTML ao style.css que criaremos com o SASS, adicionando a tag <link>.
Dentro do <body> da página, definiremos um título <h1>, uma <div> contendo um título <h2>, dois parágrafos <p>, e, por fim, 3 botões.
Cada uma dessas tags receberá classes seguindo a convenção da metodologia BEM (Block Element Modifier).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Minha página com SASS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Esse é o meu H1</h1>
<div>
<h2>Aqui tá o meu H2</h2>
<p class="paragrafo">
Meu parágrafo: Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Aspernatur placeat, quas temporibus, esse porro, quis eos dignissimos
quia ratione reprehenderit omnis quidem ut in. Quia laboriosam incidunt
animi. Perspiciatis, nihil?
</p>
</div>
<button class="botao-princ">ESSE É O MEU BOTÃO</button>
<button class="botao-sec">ESSE É O MEU BOTÃO</button>
<button class="botao-terc">ESSE É O MEU BOTÃO</button>
</body>
</html>Para saber o que é a metodologia BEM e como ela funciona, confira nossa aula: Metodologia BEM no CSS: Como Organizar Seu Código de Forma Eficiente
Compilação do SASS – Criando e Executando Scripts
Para começar a estilizar nossa página com Sass, primeiro vamos criar o arquivo style.scss dentro da pasta do projeto.
Como estamos usando a sintaxe SCSS, todo CSS válido também é SCSS válido. Os recursos específicos do Sass, porém, precisam ser compilados antes de chegar ao navegador.
Para que os arquivos SASS possam ser lidos pelo navegador, precisamos compilá-los (transformá-los) para CSS.
Faremos isso adicionando o script de compilação ao campo scripts do arquivo package.json: "compilar": "sass style.scss style.css".
{
"name": "aula-de-sass",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"compilar": "sass style.scss style.css"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"sass": "^1.103.1"
}
}Com esse script, execute npm run compilar no terminal para gerar o CSS.
Essa ação criará o arquivo style.css e, junto dele, o arquivo style.css.map, que faz o mapeamento do CSS compilado de volta para o código SASS original.
O arquivo .map indica qual linha no SASS corresponde ao CSS compilado, facilitando o rastreamento de estilos.
Sem o modo de observação, cada alteração em style.scss exige uma nova execução do comando de compilação.
Para evitar esse processo manual, podemos adicionar um script chamado “watch” que atualiza o arquivo CSS automaticamente sempre que o arquivo SASS for alterado.
HTML e CSS ImpressionadorVocê vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!
Começar agora
No package.json, junto do script de compilação, adicionaremos "observar": "sass --watch style.scss style.css".
{
"name": "aula-de-sass",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"compilar": "sass style.scss style.css",
"observar": "sass --watch style.scss style.css"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"sass": "^1.103.1"
}
}Feito isso, basta executar npm run observar no terminal. A opção --watch recompila o arquivo quando detectar mudanças.
Agora, ao aplicar uma regra de estilo no arquivo style.scss e salvá-lo, o arquivo será automaticamente compilado para o style.css.
Por exemplo, vamos estilizar o título <h1> adicionando uma regra ao arquivo style.scss.
h1 {
font-size: 30px;
color: red;
}Após salvar o arquivo, você verá uma mensagem de compilação no terminal. Ao acessar o arquivo style.css, a regra de estilo estará aplicada nele.
Visualizando a página no navegador, o título <h1> estará corretamente estilizado em vermelho.
Variáveis no SASS – Simplificando a Manutenção de Estilos
O uso de variáveis é uma das grandes vantagens do SASS. Com elas, é possível armazenar valores que podem ser usados em várias partes do código, como cores, tamanhos e espaçamentos.
Isso facilita a manutenção, pois qualquer mudança de estilo pode ser feita alterando apenas a variável correspondente.
Para declarar uma variável em SASS, utilizamos a sintaxe $nome-da-variável. Por exemplo, vamos criar uma variável chamada $azul e aplicá-la aos nossos parágrafos.
$azul: rgb(38, 38, 175);
h1 {
font-size: 30px;
color: red;
}
p {
font-size: 16px;
color: $azul
}Ao salvar e visualizar a página, a cor azul será aplicada aos parágrafos.
Observação Importante: Diferente do CSS, as variáveis em SASS são processadas no momento da compilação, ou seja, não podem ser acessadas diretamente pelo navegador ou via JavaScript.
Ao visualizar o arquivo style.css, veremos que a cor azul foi atribuída aos parágrafos, mas não existe uma declaração de variáveis, como acontece com as variáveis nativas do CSS.
No CSS, as variáveis podem ser alteradas dinamicamente com JavaScript, permitindo mudanças visuais na página sem necessidade de recarregar ou recompilar o código.
No entanto, também é possível declarar variáveis CSS dentro do arquivo style.scss para ter essa flexibilidade.
:root {
--azul: blue;
}
$azul: rgb(38, 38, 175);
h1 {
font-size: 30px;
color: red;
}
p {
font-size: 16px;
color: var(--azul)
}Dessa forma, a variável –azul estará disponível no arquivo style.css e poderá ser acessada dinamicamente.
Além dessa diferença, o SASS oferece algumas praticidades ao trabalharmos com variáveis. Por exemplo, para criar transparência em uma cor.
No CSS puro, precisaríamos declarar cada variação de cor explicitamente:
:root {
--azul: blue;
--azul-transparente: rgba(0, 0, 255, 0.2);
}Com Sass, podemos calcular uma variação de transparência no momento da compilação usando o módulo de cores:
@use "sass:color";
$azul: rgb(38, 38, 175);
$azul-transparente: color.change($azul, $alpha: 0.2);Assim, qualquer alteração em $azul será refletida em $azul-transparente na próxima compilação. O CSS moderno também oferece funções nativas de cor, mas os cálculos de Sass acontecem durante o build e geram um valor CSS pronto.
Funções de Cores no SASS
Para manipular cores em código novo, carregue o módulo oficial sass:color. As antigas funções globais darken() e lighten() foram descontinuadas; use funções como color.adjust() ou color.scale().
No exemplo abaixo, color.adjust() reduz a luminosidade da cor em 20 pontos percentuais no espaço HSL:
@use "sass:color";
p {
font-size: 16px;
color: color.adjust($azul, $lightness: -20%, $space: hsl);
}
Para clarear a cor, use um valor positivo em $lightness:
@use "sass:color";
p {
font-size: 16px;
color: color.adjust($azul, $lightness: 20%, $space: hsl);
}
Nesting (Aninhamento) – Organização Hierárquica de Seletores
O conceito de nesting (aninhamento) permite colocar um seletor dentro de outro, criando uma estrutura hierárquica que facilita a organização do código. Já abordamos o CSS Nesting nativo na aula sobre: CSS Nesting – Passo a Passo.
No SASS, podemos usar o operador & para substituir o nome da classe “pai”, o que facilita o aninhamento dos seletores sem criar hierarquias desnecessárias.
Por exemplo, não precisamos repetir o nome do bloco ou elemento, desde que o & seja usado corretamente e dentro do bloco adequado.
:root {
--variavel: #123;
}
$variavel: #123;
body {
font-size: 16px;
color: var(--variavel);
color: $variavel;
div {
font-size: 21px;
p {
color: brown;
&.paragrafo {
font-weight: bold;
}
}
}
}Esse estilo de aninhamento torna o código mais claro, pois mantém a estrutura do CSS consistente com o HTML, facilitando a leitura e reduzindo a repetição desnecessária de nomes de classes.
Organização com Partials e Imports
Para uma melhor organização e legibilidade do código, o SASS possibilita a criação de arquivos menores chamados de “partials”. Eles ajudam a organizar componentes, variáveis e mixins.
Ou sejam os partials são arquivos .scss menores que irão conter partes específicas do código.
Por convenção, os nomes dos arquivos partials começam com o caractere de sublinhado _. Esse caractere indica ao SASS que esses arquivos não devem ser compilados diretamente em CSS.
Por exemplo, vamos criar um partial chamado _variaveis para armazenar todas as variáveis do projeto.
:root {
--variavel: #123;
}
$cor: #eee;
$fundo: #222;
$tamanho-fonte: 16px;
Em projetos atuais, carregue partials com @use. O antigo @import está descontinuado no Dart Sass desde a versão 1.80.0 porque tornava nomes globais e podia carregar o mesmo arquivo repetidas vezes.
Para usar as variáveis de _variaveis.scss em style.scss, carregamos o módulo com @use "variaveis" as v. O namespace v deixa explícita a origem de cada variável.
Ao carregar um partial, não informe a extensão .scss nem o sublinhado inicial do nome do arquivo.
Feita a importação, você pode utilizar as variáveis normalmente no seu código.
@use "variaveis" as v;
body {
font-size: 16px;
color: var(--variavel);
color: v.$cor;
background-color: v.$fundo;
div {
font-size: 21px;
p {
color: lightblue;
&.paragrafo {
font-weight: bold;
}
}
}
}
Por que usar Partials e Imports?
- Organização: Cada parte do projeto é isolada em seu próprio arquivo, facilitando a leitura e manutenção.
- Reutilização: Você pode reutilizar partials em vários projetos ou arquivos.
- Redução de Repetições: Estilos e configurações comuns podem ser centralizados.
- Manutenção Fácil: Alterações em um partial se refletem automaticamente no arquivo principal.
Mixins – Reutilizando Estilos
Mixins são blocos de código reutilizáveis que permitem incluir estilos em várias partes do código.
Um dos grandes benefícios é a possibilidade de usar parâmetros, que permitem criar mixins flexíveis e personalizáveis.
Por que usar Mixins?
- Para evitar repetição de código.
- Para criar componentes com estilos semelhantes, mas ajustáveis (como botões, cards ou layouts).
Usaremos um partial para organizar nossos mixins, portanto vamos criar o arquivo _mixins.scss onde definiremos as regras de estilo que desejamos utilizar diversas vezes.
Vamos fazer um exemplo definindo as regras de estilo para os dois primeiros botões da nossa página.
Nesse caso, todos os botões terão como padrão as formatações de padding, borda arredondada, tamanho da fonte, cor de fundo e peso da fonte.
@mixin botão() {
padding: 10px 20px;
border-radius: 100px;
font-size: 16px;
background-color: #eee;
font-weight: bold;
}Com o mixin criado, podemos utilizá-lo em style.scss. Carregue o módulo com @use e inclua o mixin na regra de cada botão com @include.
A vantagem dessa abordagem é que, como os dois botões possuem o mesmo estilo base, podemos apenas utilizar o mixin e acrescentar as demais formatações desejadas para cada um.
@use "variaveis" as v;
@use "mixins" as m;
body {
font-size: 16px;
color: var(--variavel);
color: v.$cor;
background-color: v.$fundo;
div {
font-size: 21px;
p {
color: lightblue;
&.paragrafo {
font-weight: bold;
}
}
}
}
.botao-princ {
@include m.botao;
&:hover {
background-color: #ccc;
}
}
.botao-sec {
@include m.botao;
&:hover {
background-color: lightblue;
}
}Além disso, um mixin pode receber parâmetros para ajustar seus estilos dinamicamente. Esses parâmetros funcionam como variáveis locais dentro do mixin. Quando o mixin é chamado, você pode passar valores para esses parâmetros.
Ou seja, no momento de criação do mixin você irá informar o nome do parâmetro dentro do parênteses e definir para qual regra esse parâmetro será aplicado.
Vamos fazer isso para o tamanho da fonte:
@mixin botao($fonte) {
padding: 10px 20px;
border-radius: 100px;
font-size: $fonte;
background-color: #eee;
font-weight: bold;
}Agora, no momento de utilizar o mixin para atribuir os estilos aos botões, vamos informar o valor que desejamos para a fonte de cada um. Isso nos permite ter regras de estilo dinâmicas para elementos semelhantes.
.botao-princ {
@include m.botao(16px);
&:hover {
background-color: #ccc;
}
}
.botao-sec {
@include m.botao(24px);
&:hover {
background-color: lightblue;
}
}Visualizando a nossa página, veremos que cada botão possui um tamanho de fonte específico determinado de acordo com o valor informado.
Extends – Compartilhando Estilos
O comando @extend permite que você compartilhe regras de estilo entre seletores sem duplicar o código. Ele é útil para criar grupos de estilos comuns que podem ser aplicados a diferentes elementos.
Seu funcionamento é semelhante ao dos mixins, mas com algumas diferenças:
- Mixins: Criam blocos reutilizáveis de código e podem receber parâmetros, gerando uma cópia do código em cada uso.
- Extends: Compartilham regras entre seletores existentes, combinando-os no CSS gerado.
Ou seja, o mixin copia o bloco de regras de estilo para cada seletor, enquanto o extends combina diferentes seletores para a mesma regra.
O extends é ideal para estilos globais que precisam ser aplicados a diferentes elementos.
Vamos estilizar o terceiro botão da nossa página utilizando um Extends. Para isso, criaremos o partial _extends.scss.
Dentro dele definiremos um placehold com o símbolo de %. Ele é como um seletor de classe, mas só pode ser usado com @extend.
%botao {
padding: 10px 20px;
border-radius: 100px;
font-size: 21px;
background-color: #eee;
font-weight: bold;
}Com o placeholder criado, podemos carregá-lo e aplicá-lo ao seletor do terceiro botão em style.scss.
@use "variaveis" as v;
@use "mixins" as m;
@use "extends" as *;
body {
font-size: 16px;
color: var(--variavel);
color: v.$cor;
background-color: v.$fundo;
div {
font-size: 21px;
p {
color: lightblue;
&.paragrafo {
font-weight: bold;
}
}
}
}
.botao-princ {
@include m.botao(16px);
&:hover {
background-color: #ccc;
}
}
.botao-sec {
@include m.botao(24px);
&:hover {
background-color: lightblue;
}
}
.botao-terc {
@extend %botao;
}
Operações Matemáticas no SASS
A última funcionalidade que eu quero te mostrar do SASS é a capacidade de lidarmos com operações matemáticas dentro dos nossos códigos de estilo.
Por exemplo, no módulo de variáveis temos $tamanho-fonte com o valor de 16px.
Ao criar os nossos botões, ao invés de utilizar um valor fixo em pixels como fizemos anteriormente, podemos utilizar operadores matemáticos para calcular o tamanho a partir do tamanho dessa variável.
.botao-princ {
@include m.botao(v.$tamanho-fonte * 1.5);
&:hover {
background-color: #ccc;
}
}
.botao-sec {
@include m.botao(v.$tamanho-fonte * 1.25);
&:hover {
background-color: lightblue;
}
}Essas operações com unidades compatíveis são avaliadas pelo Sass durante a compilação. Já calc() continua útil quando o resultado depende de valores conhecidos apenas no navegador, como porcentagens, viewport ou variáveis CSS.
Conclusão – O que é SASS – CSS com Superpoderes!
Sass acrescenta ao CSS recursos de organização e reutilização, como módulos, variáveis, mixins e funções. O resultado da compilação continua sendo CSS comum.
Em projetos novos, use SCSS com Dart Sass, carregue módulos com @use e prefira as funções modulares, como as de sass:color. Consulte a documentação oficial do Sass ao adotar recursos que também evoluem no CSS nativo.
Na aula de hoje, mostrei como utilizar e integrar o SASS aos seus projetos, otimizando a manutenção e a atualização de estilos de forma prática e rápida.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- LESS CSS: Guia Completo do Pré-processador (2026)
LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático. - Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS. - Display CSS: Nova Sintaxe e Como Usar
Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.
