Você sabe o que é SASS em CSS? Com esta introdução ao SASS, você aprenderá a desenvolver códigos mais limpos, otimizados e organizados.
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), que significa “Folhas de Estilo Sintaticamente Incríveis”, é uma ferramenta projetada para melhorar a maneira como escrevemos CSS.
Com o SASS, podemos criar códigos mais organizados e eficientes, o que facilita o desenvolvimento de estilos para páginas na internet.
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 é um pré-processador CSS que oferece várias funcionalidades para facilitar a criação de folhas de estilo.
Você escreve o código em SASS, e ele é compilado (ou transformado) em CSS puro, que os navegadores conseguem interpretar.
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), dependendo do objetivo do projeto.
Para esta aula, utilizaremos a segunda opção. Execute o comando: npm install –save-dev sass
Você pode consultar as diferentes formas de instalação no site oficial do npm: https://www.npmjs.com/package/sass
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.
Basta compartilhar o arquivo package.json. Com ele, todos os pacotes listados podem ser reinstalados facilmente usando o comando npm i ou npm install, o que facilita a configuração do ambiente em diferentes máquinas.
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.
Dentro desse arquivo, tudo que pode ser escrito em CSS também pode ser feito em SASS. No entanto, nem todo código SASS é compreensível pelo CSS.
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 no 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.83.0"
}
}Com esse script, basta rodar o comando npm run compilar no terminal para compilar o SASS automaticamente.
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.
No entanto, ao fazer dessa forma, cada vez que uma alteração for feita dentro do arquivo main.scss, será necessário executar novamente o comando de compilação para que as modificações tenham efeito.
Para evitar esse processo manual, podemos adicionar um script chamado “watch” que atualiza o arquivo CSS automaticamente sempre que o arquivo SASS for alterado.
No package.json, junto do script de compilação, adicionaremos o seguinte: “observar”: “sass style.scss style.css -w”
{
"name": "aula-de-sass",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"compilar": "sass style.scss style.css",
"observar": "sass style.scss style.css -w"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"sass": "^1.83.0"
}
}Feito isso, basta executar o comando npm run observar no terminal.
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 nosso arquivo main.scss.css.
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 o SASS, podemos criar uma variação de transparência com base na variável original:
$azul: rgb(38, 38, 175); $azul-transparente: rgba($azul, 0.2);
Assim, qualquer alteração na variável $azul refletirá automaticamente na variável $azul-transparente, o que não é possível com CSS puro.
Funções de Cores no SASS
O SASS oferece funções como darken e lighten, que ajustam automaticamente a tonalidade das cores. Essas funções são úteis para criar variações de cores sem precisar especificá-las manualmente.
Por exemplo, para escurecer a cor do parágrafo, usamos darken, que recebe como argumentos a cor ($color) e a quantidade a ser escurecida ($amount).
p {
font-size: 16px;
color: darken($color: $azul, $amount: 20%);
}
Da mesma forma, lighten pode clarear uma cor usando a mesma estrutura de argumentos.
p {
font-size: 16px;
color: lighten($color: $azul, $amount: 20%);
}
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;
O comando @import é usado para importar partials em um arquivo principal. Ele combina o conteúdo dos partials no momento da compilação, gerando um único arquivo CSS consolidado.
Portanto, para usar as variáveis que acabamos de criar, dentro do nosso arquivo style.scss, precisamos importa-las com o @import.
No momento de importarmos um partial não precisamos passar a extensão do arquivo (.scsss) e nem utilizar o underscore (sublinhado) antes do nome.
Feita a importação, você pode utilizar as variáveis normalmente no seu código.
@import 'variaveis';
body {
font-size: 16px;
color: var(--variavel);
color: $cor;
background-color: $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 dentro do arquivo style.scss para estilizar os botões da página. Basta importarmos o mixin com o comando @import e depois incluí-lo dentro da regra de estilo de cada botão com o comando @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.
@import "variaveis";
@import "mixins";
body {
font-size: 16px;
color: var(--variavel);
color: $cor;
background-color: $fundo;
div {
font-size: 21px;
p {
color: lightblue;
&.paragrafo {
font-weight: bold;
}
}
}
}
.botao-princ {
@include botao;
&:hover {
background-color: #ccc;
}
}
.botao-sec {
@include 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 botao(16px);
&:hover {
background-color: #ccc;
}
}
.botao-sec {
@include 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 extebd criado, podemos importa-lo e aplica-lo dentro do arquivo style.scss ao seletor do terceiro botão.
@import "variaveis";
@import "mixins";
@import "extends";
body {
font-size: 16px;
color: var(--variavel);
color: $cor;
background-color: $fundo;
div {
font-size: 21px;
p {
color: lightblue;
&.paragrafo {
font-weight: bold;
}
}
}
}
.botao-princ {
@include botao(16px);
&:hover {
background-color: #ccc;
}
}
.botao-sec {
@include 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, dentro das nossas variáveis temos a variável $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 botao($tamanho-fonte * 1.5);
&:hover {
background-color: #ccc;
}
}
.botao-sec {
@include botao($tamanho-fonte * 1.25);
&:hover {
background-color: lightblue;
}
}
Dessa forma podemos fazer contas diretamente nas regras de estilo, sem a necessidade de utilizar a função calc() por exemplo.
Conclusão – O que é SASS – CSS com Superpoderes!
O SASS transforma o CSS em uma linguagem mais poderosa e eficiente, ideal para projetos que exigem maior escalabilidade e organização.
Sua compatibilidade com o CSS nativo e sua flexibilidade oferecem uma curva de aprendizado suave, mas com grandes benefícios para o desenvolvimento frontend.
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
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- 5 Boas Práticas de SQL para Iniciantes: Otimize Suas Consultas e Organize Seu Código
Se você está começando com MySQL ou busca melhorar suas habilidades em SQL, este post traz cinco boas práticas de escrita de SQL para iniciantes. - Função SE Excel: Exemplos e Dicas para Uso [Guia] A função SE Excel é muito útil para definir condições e criar uma planilha mais completa e funcional. Confira nesta aula!
- Exercícios de Listening em Inglês – Como Melhorar sua Compreensão Faça estes exercícios de listening em inglês e melhore sua compreensão! Descubra técnicas e estratégias para praticar e evoluir no aprendizado do idioma!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.