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 semanas usando o SASS (pra quem não sabe identificar sarcasmo fica a dica: isso foi sarcasmo) o que eu mais costumo usar variáveis é com cores recorrentes, tamanhos e fontes.
Um exemplo prático é de um projeto que fiz recentemente de uma landing page para o Requinte Recepções (na data que esse post foi publicado esse site ainda não foi ao ar).
Agora o nesting. Nesting significa aninhar, botar uma coisa dentro da outra. E é exatamente isso que esse pré-compilador tão chique faz. Você coloca um seletor, diz as propriedades dele, identa e coloca outra seletor dentro daquele mesmo bloco e o SASS vai saber que você quer que o seletor identado seja parte do acima. Meio dificil de entender neh? Mas na prática é super simples. Vamos dizer que você tem uma div com a classe "imagem" (por favor nomeie melhor suas classes) e dentro dela você tem o que? Advinha? Uma imagem, ou duas, ou quantas seja. E o css aplicado vai ser o mesmo pra todas as imagens dessa div. No css normal seria feito da seguinte maneira:
.imagem{ padding: 0; margin: 0 auto;} /*div da imagem */
.imagem img{ max-width: 50%; }
Agora com Sass:
.imagem{
padding: 0;
margin: 0 auto;
img{
max-width:50%;
} /*fim da imagem*/
}/*fim da div da imagem */
Pode não parecer muito, mas isso poupa um trabalho absurdo. Você deixar de escrever algo na programação pra mim é o nirvana, porque além de agilizar você gasta seus neuronios com coisas realmente úteis. Agora, o nesting tem que ser usado com moderação. Porque cria especificidade demais. Vamos para a parte mais complexa do que aprendi esses dias.
Vamos pegar esse código aqui:
Lindo neh? Poupou muito tempo de escrever. Esse código vai me gerar isso aqui:
Olha o tanto de seletor que tem aqui. Só pra estilizar o li tem 4 seletores. QUATRO. E pra mudar isso depois? Das duas uma, ou você vai no arquivo já sabendo onde é o seletor e muda, muda com o próprio SASS também ou coloca um lindo !important do lado. O primeiro caso de ir no seletor e mudar primeiramente você pensa que é fácil, de boas. Concordo. Num CSS de 500 linhas simples de uma landing page bem documentado. Mas pega um código de outra pessoa de +1000 linhas (isso botando uma quantidade de css bem razoável) desorganizado pra ver como é fácil. O que eu tento fazer é usar o nesting mas não abusar. Estou tentando sempre manter em no máximo dois seletores que ta nice já. Fiz isso por sofrimento próprio pra mudar coisas dentro de super nests. E nesting também atrapalha no @extend, que é uma propriedade massa a vera que eu vou documentar minha experiência de aprendizado no próximo post juntamente com o que eu deveria ter colocado nesse, como aprendi a usar o SASS.
É isso por hoje, coisas que aprendi nesse mês abençoado de outubro.
Abraços, Matheus Beltrão
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 semanas usando o SASS (pra quem não sabe identificar sarcasmo fica a dica: isso foi sarcasmo) o que eu mais costumo usar variáveis é com cores recorrentes, tamanhos e fontes.
Um exemplo prático é de um projeto que fiz recentemente de uma landing page para o Requinte Recepções (na data que esse post foi publicado esse site ainda não foi ao ar).
exemplo de declaração de variáveis
Variáveis são úteis tanto para repetição de valores pelo seu css todo quanto para quando for preciso mudanças. Por algum motivo meses depois o cliente quer mudar o azul do site todo por um verde. Muito mais fácil alterar só a variável $azul, ou $corprimaria ou qualquer nome que for colocado pra a cor nova do que sair substituindo na mão. Uma coisa que achei bacana é que é muito mais fácil decorar o nome da variável que o hex dela ou número. Ah, aqui tenho que colocar a cor do texto "color: $cor-texto;". Muito mais humano e prático. Sim, e o que eu notei depois de ter completado esse css é que os nomes das minhas variáveis estão péssimos. Já deu pra sacar pelo exemplo que eu dei, boto uma variável $azul, depois tenho que mudar a cor dela pra verde e ai fiquei preso a variável $azul sempre que tiver que chamar a cor mesmo ela sendo verde.
variáveis em uso
Agora o nesting. Nesting significa aninhar, botar uma coisa dentro da outra. E é exatamente isso que esse pré-compilador tão chique faz. Você coloca um seletor, diz as propriedades dele, identa e coloca outra seletor dentro daquele mesmo bloco e o SASS vai saber que você quer que o seletor identado seja parte do acima. Meio dificil de entender neh? Mas na prática é super simples. Vamos dizer que você tem uma div com a classe "imagem" (por favor nomeie melhor suas classes) e dentro dela você tem o que? Advinha? Uma imagem, ou duas, ou quantas seja. E o css aplicado vai ser o mesmo pra todas as imagens dessa div. No css normal seria feito da seguinte maneira:
.imagem{ padding: 0; margin: 0 auto;} /*div da imagem */
.imagem img{ max-width: 50%; }
Agora com Sass:
.imagem{
padding: 0;
margin: 0 auto;
img{
max-width:50%;
} /*fim da imagem*/
}/*fim da div da imagem */
Pode não parecer muito, mas isso poupa um trabalho absurdo. Você deixar de escrever algo na programação pra mim é o nirvana, porque além de agilizar você gasta seus neuronios com coisas realmente úteis. Agora, o nesting tem que ser usado com moderação. Porque cria especificidade demais. Vamos para a parte mais complexa do que aprendi esses dias.
Vamos pegar esse código aqui:
Nesting SASS
Lindo neh? Poupou muito tempo de escrever. Esse código vai me gerar isso aqui:
Resultado do nesting com CSS
Olha o tanto de seletor que tem aqui. Só pra estilizar o li tem 4 seletores. QUATRO. E pra mudar isso depois? Das duas uma, ou você vai no arquivo já sabendo onde é o seletor e muda, muda com o próprio SASS também ou coloca um lindo !important do lado. O primeiro caso de ir no seletor e mudar primeiramente você pensa que é fácil, de boas. Concordo. Num CSS de 500 linhas simples de uma landing page bem documentado. Mas pega um código de outra pessoa de +1000 linhas (isso botando uma quantidade de css bem razoável) desorganizado pra ver como é fácil. O que eu tento fazer é usar o nesting mas não abusar. Estou tentando sempre manter em no máximo dois seletores que ta nice já. Fiz isso por sofrimento próprio pra mudar coisas dentro de super nests. E nesting também atrapalha no @extend, que é uma propriedade massa a vera que eu vou documentar minha experiência de aprendizado no próximo post juntamente com o que eu deveria ter colocado nesse, como aprendi a usar o SASS.
É isso por hoje, coisas que aprendi nesse mês abençoado de outubro.
Abraços, Matheus Beltrão
Comentários
Postar um comentário