SASS /SCSS

Jose Pedro Dava
Aug 29, 2017 · 4 min read

“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;

)

Jose Pedro Dava

Written by

Moovi Co-Founder | Web Developer |

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade