O Sass e o Dry
Como aplicar a metodologia Dry utilizando o pré-processador de css
Um dos acontecimentos que marcaram a nova fase da web moderna foi o surgimento dos pré-processadores, que trouxeram consigo uma maneira mais prática e moderna de escrever o antigo e repetitivo CSS.
Dentre todos, o que recebeu mais destaque foi o Sass, graças a sua pequena curva de aprendizado, inúmeras features e a possibilidade de escrever o puro CSS dentro de seu formato nested com a extensão de arquivo .scss
Mas, o que é Dry?
O Dry (Don’t Repeat Yourself ) é uma metodologia que defende a não repetição desnecessária do seu código, visando reduzi-lo e otimiza-lo.
Tá, mas como eu aplico isso?
O Sass foi criado com base no Dry, com isso, várias de suas features foram desenvolvidas para se enquadrar neste modelo de desenvolvimento, neste artigo irei mostrar como estas são aplicáveis à metodologia.
Variáveis e Nest
A mais inovadora e útil feature trazida pelo Sass, as variáveis, são o conceito mais puro do Dry, armazenar pequenos fragmentos de código para reutiliza-los sem repeti-los. Vejamos um exemplo:
No código acima, utilizo a variável “$primaria” para definir a cor principal e poder reutiliza-la em qualquer parte do código. Neste exemplo, alem da variável eu utilizo o nest, a funcionalidade do Sass que permite englobar elementos filhos, pseudo-classes (:hover, :focus, etc…) e pseudo-elementos (::before, ::after). Veja como ficaria o mesmo código em css puro:
Parece pouca a diferença não é mesmo? E é, por um simples e único motivo, código pequeno. Observe quantas vezes precisei repetir a cor e a classe .button, agora imagine este mesmo botão dentro da seguinte expressão:
main .destaque figure figcaption .button
Seria necessário repetir a mesma expressão 4 vezes para fazer o mesmo código sendo que com nest só é necessário usar o identificador do elemento pai apenas uma vez.
Mixins e Includes
Já percebeu que todas as vezes que precisamos definir, por exemplo, o estilo do texto de algum elemento sempre utilizamos quase que as mesmas propriedades (Ex.: font-family, font-size, font-weight, color, line-height e etc…), Imagina se fosse possível criar funções para reutilizar estas propriedades e evitar reescreve-las, com os mixins e os includes do Sass isso é mais que possível, por exemplo:
No arquivo _mixins.scss, eu crio o mixin font com os parâmetros e verifico a existência de cada um deles, permitindo que eu possa usar somente as propriedades que eu julgue necessário.
No app.scss, eu importo o arquivo _mixins (não é necessário dizer a extensão do arquivo na importação) e dentro de cada tag, eu utilizo include para chamar a o mixin que eu desejo usar.
For
No Sass assim como em linguagens de programação é possível utilizar o for para percorrer arrays e/ou usar contadores, é comumente acompanhado da pseudo-classe nth-child() que é uma forma de dizer como um filho especifico do elemento irá se comportar.
Acima é possível ver a aplicação mais comum do for no Sass. Também foi utilizada a função lighten, irei explicar sua aplicação em um artigo futuro. O resultado desta expressão será este:
E finalizando…
Existem muitas outras formas de diminuir a quantidade de código que você vai utilizar, essas são as mais simples de serem aplicadas, utilizando elas eu garanto que você irá reduzir trabalho em pelo menos 40%.
Até o próximo artigo Devs, deixem seu Clap para nos incentivar a trazer mais conteúdo de Sass para vocês ❤!
