Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
SASS e SCSS do básico ao avançado + Projetos
Role Play
Highest Rated
Rating: 4.6 out of 5(595 ratings)
3,013 students
Last updated 12/2025
Portuguese

What you'll learn

  • Criar projetos com SASS ou SCSS
  • Aprender a arquiteturar projetos com SASS ou SCSS
  • Criar layouts responsivos e modernos
  • Aprender mais sobre HTML e CSS
  • Boas práticas de frontend

Course content

15 sections176 lectures13h 53m total length
  • Introdução do curso5:12
  • Apresentação do curso8:42
  • O que é um pré-processador3:24
  • O que é SASS?3:24
  • Recursos do SASS3:29
  • Diferenças entre SASS, SCSS e CSS3:16
  • Instalação de dependências6:43
  • Instalando o SASS2:45
  • Instalando a extensão Sass no Vs Code1:59
  • Primeiro projeto com SASS8:33
  • Como debugar código SASS2:53
  • Como tirar o máximo de proveito deste curso4:19
  • Arquivos do curso0:11
  • Slides do curso0:13
  • Indicações de Livros0:12
  • Conclusão da seção0:38
  • Quiz sobre a introdução ao SASS
  • Como aprender programação mais rápido e ter sucesso na carreira3:54
  • Teste para saber sua dificuldade com programação0:22

Requirements

  • É interessante conhecer HTML e CSS, mas também reforço o conteúdo no curso

Description

Está em busca de um curso SASS e SCSS do básico ao avançado com certificado online? Neste curso você vai aprender a criar projetos utilizando o SASS/SCSS como pré-processamento do seu CSS, agilizando muito o seu desenvolvimento e ainda dando acesso a recursos incríveis que o CSS não tem.

Todos os recursos serão abordados de forma teórica e depois aplicamos o mesmo na prática, para entender onde podem ser utilizados na vida real, o curso é extremamente prático e vai te preparar para o mercado de trabalho.

Veja alguns dos recursos que serão abordados:

  • Variáveis;

  • Nesting;

  • Mixins;

  • Partials;

  • Módulos do SASS;

  • Heranças;

  • Operadores de seleção;

  • E muito mais!

E também toda e qualquer atualização de SASS teremos os recursos implementados no curso, para que você sempre esteja atualizado com os recursos mais modernos lançados, que é o caso dos módulos, que já são abordados no curso.

Vamos também aplicar todos os recursos aprendidos nas aulas teóricas em projetos práticos, que vão do zero absoluto, passando pelo planejamento e instalação até a responsividade dos sites que vamos criar.

E além dos conhecimentos em SASS, você também vai aprender outros tópicos relacionados a desenvolvimento de software, que são:

  • Como arquitetar um projeto;

  • Boas práticas de desenvolvimento;

  • Como definir as regras de negócio;

  • Organização de código;

Isso tudo vai te tornar um melhor desenvolvedor não só em SASS, mas sim no geral, você vai evoluir como programador!

Qual a diferença de SCSS para CSS?

SCSS (Sassy CSS) é uma extensão do CSS que introduz recursos adicionais, como variáveis, aninhamento de seletores, mixins e herança, tornando-o mais poderoso e flexível. A principal diferença entre SCSS e CSS é a sintaxe utilizada.


Enquanto o CSS usa uma sintaxe simples com chaves, pontos e ponto e vírgula para definir estilos, o SCSS permite uma sintaxe mais amigável ao desenvolvedor, usando uma estrutura similar ao de outras linguagens de programação, como o JavaScript.

Uma das vantagens do SCSS é o uso de variáveis, que permitem definir valores reutilizáveis. Por exemplo, ao definir uma cor principal, podemos atribuí-la a uma variável e usá-la em vários lugares do código.

Outro recurso útil é o aninhamento de seletores, que permite agrupar seletores relacionados dentro de outros. Isso simplifica a escrita e leitura do código, tornando-o mais organizado e legível.

Os mixins são outro recurso poderoso do SCSS. Eles permitem definir blocos de estilos reutilizáveis, semelhantes a funções em outras linguagens de programação. Assim, é possível criar estilos complexos com apenas uma chamada de mixin.

Para aplicar SCSS na prática, é necessário compilar o código SCSS em CSS para que o navegador possa interpretá-lo. Isso pode ser feito utilizando ferramentas como o compilador do Sass ou pré-processadores CSS incorporados em frameworks.

Ao utilizar SCSS, você pode escrever estilos de forma mais eficiente, modular e reutilizável. Ele oferece recursos avançados para desenvolvedores, permitindo criar estilos mais complexos e escaláveis. Lembre-se que o SCSS precisa ser compilado em CSS para ser interpretado pelo navegador.

Por que aprender SASS e SCSS do básico ao avançado?

Aprender SASS (Syntactically Awesome Style Sheets) e SCSS (Sassy CSS) do básico ao avançado traz diversas vantagens e benefícios para os desenvolvedores. Aqui estão algumas razões pelas quais vale a pena investir tempo e esforço nessa tecnologia:

Organização e reutilização de código: Com o SASS/SCSS, usará recursos como variáveis, mixins e aninhamento de seletores para escrever um código mais limpo, modular e fácil de manter. Por exemplo, é possível definir um conjunto de estilos em um mixin e usá-lo em vários elementos ao longo do código.

Melhor produtividade: O SASS/SCSS oferece recursos que economizam tempo e esforço durante o desenvolvimento. A capacidade de aninhar seletores, por exemplo, permite escrever estilos hierárquicos de forma mais eficiente.

Facilidade de manutenção: Com o SASS/SCSS, é mais fácil realizar atualizações e ajustes em estilos existentes. Ao usar variáveis, por exemplo, é possível alterar uma cor ou tamanho em um único local, refletindo automaticamente em todas as ocorrências desse valor no código.

Compatibilidade com CSS: O SASS/SCSS é uma extensão do CSS, todo o código CSS existente é compatível. Possibilitando, consequentemente, a migração gradual de projetos para o uso do SASS/SCSS, aproveitando os recursos adicionais sem a necessidade de reescrever todo o código.

Comunidade ativa: O SASS/SCSS é amplamente utilizado e possui uma comunidade ativa de desenvolvedores, há uma abundância de recursos, tutoriais e suporte disponíveis online.

No dia a dia, o SASS/SCSS é usado para criar estilos avançados e bem organizados em projetos web. É amplamente adotado em frameworks front-end, como Bootstrap e Foundation, e é uma escolha popular para projetos que exigem estilos complexos e modulares.

Está pronto para dominar o SASS? Te espero então para explorarmos totalmente os recursos desse excelente pré-processador de CSS!

Obs: você também ganha aulas extras de HTML, CSS, Flexbox e um projeto para não ter dificuldade alguma durante o curso nestas linguagens que também são essenciais para o desenvolvimento em SASS e SCSS, ou seja, não tem desculpa e você também não vai ter dificuldade alguma. =)


Who this course is for:

  • Desenvolvedores frontend
  • Quem deseja aprender SASS ou SCSS
  • Desenvolvedores backend
  • Analistas de Sistemas
  • Engenheiros de Software