SASS /SCSS

“Hello world”

No post de hoje irei falar de mais um tema ligado a área de web development que é o SASS/SCSS. Onde vou explicar o que é, e irei dar alguns exemplos.

O post está mais direcionado para o pessoal que já trabalhou ou trabalha com CSS pois requer alguma experiência no CSS.

O SASS/SCSS surgiu em 2006 e foi designed por Hampton Catlin e desenvolvido por Natalie Weizenbaum. Após a versão inicial tiveram vários outros developers on board e a sua versão estável surgiu recentemente 2017.

O que é o SASS/SCSS?

Antes de definir-mos o SASS/SCSS vamos falar um bocado do CSS PROCESSOR que é nada mais nada menos que uma scripting language, que estende css permitindo que os developers escrevam codigo em outras linguagens(SASS,SCSS e stylus), e sejam compiladas em css.

SASS/SCSS — por definição é simplesmente uma extensão do css que permite o uso de variáveis, regras “NESTED”,partials, herança, inline imports e muito mais, com isso facilitando a organização do código e reduzindo o tempo de criação.

Porque usar ?

Como web devs, já devem ter passado por “situações” como por exemplo:

  • Mudança de cor , fontsize de vários elementos e para tal percorria-se todo “css file” para localizar onde as mudanças devem ser feitas.
  • Repetição de código “em caso de ficheiros css pequenos não encontramos muitos problemas mas quando trata-se de um projecto grande as coisas ficando uma salada russa”.
  • Caso do “copy paste “ de certos blocks de código para criação de um ou mais elementos.

O SASS/SCSS veio para ajudar a evitar esse tipo de “situações”, abrindo portas para criação de css files de fácil manutenção e interpretação.

SASS vs. SCSS

O SASS e SCSS como dito na definição são extensões do css… mas contém syntaxes diferentes onde o SASS não necessita de “ { } e ; “ e o SCSS necessita. “Como podem ver no exemplo abaixo.”

VARIÁVEIS

O SASS como qualquer outra linguagem permite o uso de variáveis para guardar dados, como cores, tamanho(px), fonts etc. Essas variáveis são criadas no princípio do nosso SASS file e podem usar ao longo do nosso stylesheet. Com isso só precisamos de mudar os valores onde foram declaradas as variáveis, e deixamos de procurar em todo css file e fazer as mudanças desejadas.

NESTING

Embora forneça um método excelente para reduzir a quantidade de código que precisamos escrever, por outro lado pode tornar o “CSS — Overqualified” se não for feito “Nest” com cuidado. O objectivo com o “Nest” é criar um SASS file com uma hierarquia similar do HTML.

PARTIALS

São considerados pequenos pedaços de código que após a sua criação podem ser importados ao nosso ficheiro “SASS”, assim tornando o nosso codigo em css torna-se modular e fácil de manter.

IMPORTS

Muito importante dizer que para o uso do import necesitamos de ter Partials.O @import directive permite importar partial files no ficheiro SASS com isso construindo apenas um CSS file.

MIXINS

Uma das vantagens do uso de preprocessors, e a capacidade que ele tem de levar códigos complexos, longos e simplificá-los por isso foi incorporado no SASS.

HERANÇA(extended)

A @extended directive é considerada no SASS como um dos features mais poderosos,pois com esse directive não teremos que incluir múltiplos “ class names” nos elementos HTML deixando seu código DRY, pois o selectors herdam styles de outros selectors.

Espero ouvir o que acharam sobre este tópico sobre, dúvidas, sugestões nos comentários.

Pedro Dava

josepedrodava@gmail.com; twitter:@josepedrodava;