Sass: Por que você deve utilizar
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:
1gem 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:
1 |
$ sudo apt-get install ruby-full |
Realizada a instalação do Ruby, basta instalar o Sass:
1 |
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
1 |
@import nome-do-arquivo |
SCSS
1 |
@import ‘nome-do-arquivo’; |
Utilização do caractere “$” declarar uma variável.
SASS
1 2 3 4 5 6 |
$cor-da-fonte: #666 body color: $cor-da-fonte; p color: $cor-da-fonte |
SCSS
1 2 3 4 5 6 7 8 |
$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
1 2 3 4 5 |
div p display: inline-block a text-decoration: none |
SCSS
1 2 3 4 5 6 7 8 |
div{ p{ display: inline-block } a{ text-decoration: none } } |
COMPILADO
1 2 3 4 5 6 7 |
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
1 2 3 4 5 6 7 8 9 |
=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
1 2 3 4 5 6 7 8 9 10 11 |
@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
1 2 3 4 5 6 7 |
.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!