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:

  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:

$ sudo apt-get install ruby-full

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

sudo su –c gem install 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

@import nome-do-arquivo

SCSS

@import ‘nome-do-arquivo’;

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

SASS

$cor-da-fonte: #666

body
     color: $cor-da-fonte;
p
     color: $cor-da-fonte

SCSS

$cor-da-fonte: #666;

body{
	color: $cor-da-fonte;
}
p{
	color: $cor-da-fonte;
}

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

div	
p
	display: inline-block
a
	text-decoration: none

SCSS

div{	
     p{
          display: inline-block
     }
     a{
          text-decoration: none
     }
}

 COMPILADO

div p{
     display: inline-block;
}

div a{
     text-decoration:none;
}

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

=arredondar($radius)
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     -ms-border-radius: $radius;
     -o-border-radius: $radius;
     border-radius: $radius;

.div-redonda
     +arredondar(5px)

SCSS

@mixin arredondar($radius){
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     -ms-border-radius: $radius;
     -o-border-radius: $radius;
     border-radius: $radius;
}

.div-redonda{ 
     @include arredondar(5px);
}

 COMPILADO

.div-redonda{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

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!