Conteúdo

Pré-processadores funcionam como uma extensão do CSS para auxiliar na criação de folhas de estilo com a adição de funcionalidades. Eles ajudam a diminuir a repetição de código e permitem implementar mudanças de forma mais rápida.

Neste livro, Rosicléia Frasson vem desmistificar o uso do Sass, um pré-processador que adiciona potência e elegância ao CSS nativo. Você verá como deixar suas folhas de estilo mais organizadas e de fácil manutenção ao explorar suas principais funcionalidades: variáveis, mixins, aninhamento, herança, funções e modularização.

Saiba o que você vai aprender

Sumário

• 1 Primeiros passos com Sass
• 1.1 Por que usar um pré-processador?
• 1.2 Por que o Sass?
• 1.3 Configurando o ambiente de trabalho
• 1.4 Processo de compilação
• 1.5 Configuração de saída
• 1.6 Usando comentários
• 1.7 O que esperar dos próximos capítulos

• 2 Reúse valores de propriedades com variáveis
• 2.1 Declarando uma variável
• 2.2 Referencie uma variável
• 2.3 Variáveis globais e de escopo
• 2.4 Como nomear variáveis
• 2.5 Faça muito mais com variáveis
• 2.6 Um projeto real
• 2.7 O que esperar do próximo capítulo

• 3 Escreva seletores longos mais rápido com aninhamento
• 3.1 Como aninhar regras de estilo
• 3.2 Usando o & para concatenar
• 3.3 Aninhamento de propriedades
• 3.4 Aninhamento de grupos de seletores
• 3.5 Combinação de filhos e irmãos (>, + e ~)
• 3.6 Perigos do aninhamento excessivo
• 3.7 Um projeto real
• 3.8 O que esperar do próximo capítulo

• 4 Reúse blocos de estilo com mixins
• 4.1 Definindo um mixin
• 4.2 Incluir um mixin
• 4.3 Uso de parâmetros
• 4.4 Mixin vendor prefix
• 4.5 Regras CSS nos mixins
• 4.6 Fazendo muito mais com mixins
• 4.7 Um projeto real
• 4.8 O que esperar do próximo capítulo

• 5 Evite propriedades duplicadas com herança
• 5.1 Usando a herança
• 5.2 Placeholder
• 5.3 A relação íntima entre herança e OOCSS
• 5.4 Herança versus mixin
• 5.5 Um projeto real
• 5.6 O que esperar do próximo capítulo

• 6 Dividir para conquistar
• 6.1 Criando um arquivo particionado
• 6.2 Importando uma parte de um arquivo
• 6.3 Excelentes candidatos para arquivo particionado
• 6.4 Usando particionamento para arquitetar seu CSS
• 6.5 Um projeto real
• 6.6 O que esperar do próximo capítulo

• 7 Use o poder das cores
• 7.1 Sistemas de cores
• 7.2 A função rgba
• 7.3 Retornando a composição de uma cor
• 7.4 Mix de cores
• 7.5 Escurecendo e clareando cores
• 7.6 Criando cores inversas e complementares
• 7.7 Saturar, dessaturar
• 7.8 Ajustar o matiz de uma cor
• 7.9 Adicionando canal alpha
• 7.10 Em tons de cinza
• 7.11 Um projeto real
• 7.12 O que esperar do próximo capítulo

• 8 Desvendando e manipulando os tipos de dados
• 8.1 Numbers
• 8.2 Strings
• 8.3 Booleans
• 8.4 Lists
• 8.5 Maps
• 8.6 Operações
• 8.7 Funções
• 8.8 Um projeto real
• 8.9 O que esperar do próximo capítulo

• 9 Obtendo controle extremo sobre o código gerado
• 9.1 Escrevendo estruturas de decisão com @if e @else e @else if
• 9.2 Montando uma estrutura de controle com @for
• 9.3 Controlando a saída de código com @while
• 9.4 Montando classes dinamicamente com @each
• 9.5 Um projeto real
• 9.6 O que esperar do próximo capítulo

• 10 Indo além
• 10.1 Ecossistema Sass
• 10.2 Não pare por aqui
• 10.3 Palavras finais