Cotidiano, Tédio

Essa é a parte dois do meu aprendizado com o pré-processador SASS, se você não viu a parte 1 ela se encontra aqui . Quero falar de uma propriedade muito da show de bola pra quem escreve um CSS organizado: @extend. Para usar o @extend é super simples, só coloar @extend seletor . Se for uma classe ficaria @extend .classe,  e se for uma id ficaria @extend #id.  Ela é colocada dentro de um seletor qualquer e copia todas as propriedades de outro seletor escolhido para o que ela está dentro. Parece ser um crtl + c, crtl + v automátizado. Pra nós que estamos escrevendo é, mas o resultado final do CSS não fica como se o código tivesse sido copiado no outro seletor e sim o seletor original que foi selecionado recebe outro seletor, o seletor que a função do SASS extend foi colocado. Complicou um pouco agora neh? Bom, isso são só aspectos técnicos mesmo, que só é preciso saber se der algo errado. Vamos para o que interessa:  Temos o código original que ...

Pra começar, o que danado é isso? Bom, SASS é um pré-compilador de CSS, o que quer dizer que é uma "linguagem de css" que compila ANTES de ser enviada para o browser. O fato de compilar antes é importante, porque o navegador vai receber o css puro, normal. Mas no seu arquivo vai ter a versão .sass ou .scss (no meu caso eu preferi .scss e depois eu explico mais sobre isso) Porque usar o SASS? Na minha opinião agiliza bastante a codificação de css, a sintaxe é reduzida, da pra criar variáveis, fazer o nesting das propriedades, "copiar" os atributos de outro seletor (com @extend) e criar mixins, que são como se fosse funções de programação usando css. Calma ai então, uma coisa de cada vez. Variáveis com SASS. Para criar uma variável usando SASS a sintaxe é essa: $ variável : valor . A variável tem um nome qualquer (só letras, como todo bom css) e o valor é o valor de alguma propriedade que você sabe que vai reutilizar no seu css. Com toda minha experiência de duas ...