Houve uma época em que os desenvolvedores front-end ao iniciar um projeto extenso, se deparavam com problemas de repetição de elementos, definição de valores e principalmente no tamanho final das folhas de estilo. Nem as formas mais mirabolantes de organização e reutilização de classes eram totalmente eficazes na redução de seu código e consequentemente, de seu tempo de produção. Eis que surgem os pré-processadores e frameworks de estilo para nos auxiliar nesta tarefa. Neste artigo iremos abordar um pouco mais sobre o Sass.

Sass (Syntactically Awesome Stylesheets) é extensão de modelo de escrita de css, que une as folhas de estilo com formas inteligentes de atribuir suas declarações, lhe permitindo definir valores a elementos, chamar “funções” dentro de outras classes, evitando assim a repetição de declarações e economizarão tempo na estilização. Possui formato próprio (.scss) e após compilado, sua saída torna-se um arquivo .css, cujo local gerado necessita ser configurado em seu editor. Além disso, o Sass poderá ser escrito de duas maneiras. Uma em especial implementa a não utilização de “;” para delimitar elementos nem das chaves “{ }” para abrir e fechar seletores. Apenas o pular de linha e o início de outro seletor já os delimitam.

Instalação

É compatível com Linux, Mac e Windows e possui diversas maneiras de ser instalado. Possui também integração com Api’s, especificadas no site oficial. Todas as versões possuem em comum a necessidade do Ruby instalado. Para usuários Linux e Windows, que necessitam realizar a instalação do Ruby, os passos seguem abaixo:

Windows

• Baixe o Ruby no site oficial https://www.ruby-lang.org/pt/downloads/ e instale-o.
• Ative o terminal do Ruby e na sequência, digite:
  
  MS DOS

  gem install sass

  1	gem install sass

OBS: Se houver algum erro alertando que o gem não foi encontrado, uma boa alternativa é reiniciar seu pc.

Linux (Debian ou Ubuntu)

No terminal, digite:

Realizada a instalação do Ruby, basta instalar o Sass:

Mais detalhes sobre a instalação você poderá conferir no site oficial do Sass, na área de instalação: http://sass-lang.com/install

Na Prática

Realizar uma analogia entre o Sass e qualquer linguagem de programação é inevitável, já que em muitos pontos possuem detalhes em comum. Abaixo, alguns exemplos práticos, que lhe darão uma noção inicial do que o Sass pode lhe oferecer:

Import

Você poderá fracionar seu css em arquivos diferentes, otimizando a reutilização do código e incluindo apenas um conjunto de estilos que achar necessário. Para isso, basta importa-lo para seu arquivo de estilo atual, conforme o exemplo abaixo:

SASS

SCSS

Utilização do caractere “$” declarar uma variável.

SASS

SCSS

A cor da fonte no body e no parágrafo serão definidas com o valor #666;

Nesting

De forma resumida, é possível aplicar suas definições a todos os seletores que estão contidos dentro de seletor principal, tornando o código mais legível.

SASS

SCSS

 COMPILADO

Mixins

Talvez o recurso mais interessante. Os mixins permitem que você crie grupos de declarações de css, que poderão ser utilizadas em diversos elementos distintos. Para torna-lo mais flexível, você poderá informar valores, conforme demonstra o exemplo abaixo:

SASS

SCSS

 COMPILADO

Atribuímos o valor de 5px para a variável $radius, dentro da classe div-redonda. Caso opte por utilizar o mesmo efeito em outra classe, não é necessário utilizar o mesmo efeito diversas vezes, apenas incluir @include arredondar() e, dentro dos parênteses, fornecer o valor necessário.

Estes exemplos nos dão uma noção básica sobre o poder do SASS. Para aprofundar-se no assunto, acesse o site oficial: sass-lang.com. Lá, encontrará exemplos e aplicações interessantes! Até a próxima!