Trilha · Intermediário
Sass e Less
Variável, aninhamento, mixin e módulo no CSS — o que os pré-processadores resolvem e o que virou nativo.
10 lições em ordem de estudo
Começando
- 01O que é SassSass é CSS com variável, aninhamento e módulo, compilado antes de chegar ao navegador — o que ele resolveu e o que o CSS nativo já assumiu.testado
- 02Instalar SassComo rodar o Sass sem instalar nada, ler a saída do compilador, ligar o --watch e entender o sourcemap que ele gera sozinho.testado
Fundamentos
Reuso
- 05MixinsComo escrever mixins com valores padrão, blocos com @content e breakpoints nomeados — e quanto CSS duplicado cada @include gera.testado
- 06@extendPor que o @extend reescreve seletores em vez de copiar regras, os três jeitos de ele quebrar seu CSS e quando ainda vale usar.testado
- 07Funções e operaçõesPor que 16px / 2 não vira 8px no Dart Sass atual, como usar math.div e color.adjust, e como escrever a sua própria função.testado
Módulos e escala
- 08@use e @forwardO aviso de depreciação que o @import imprime hoje, como o namespace muda suas chamadas e a estrutura de partials que sustenta o projeto.testado
- 09Maps e loopsComo guardar a paleta num map, gerar dezenas de classes com @each e @for, e o que acontece quando a chave pedida não existe.testado