O que é Sass? Entenda esse outro método de escrever CSS

Se você é um desenvolvedor front-end que está atualmente no mercado, já ouviu/leu palavrinhas como LESS, Foundation e Sass. Alguns sabem do que estou falando, outros não, mas o fato que é que esses nomes foram dados à pré-processadores e frameworks de folhas de estilo para auxiliar na produtividade de códigos, principalmente no que diz respeito a repetição de uma mesma ação, diversas vezes.

Quantas vezes você se pegou copiando e colando aquele monte de classes identadas com mais de 15 linhas repetidamente e pensou: podia existir uma maneira mais rápida de fazer isso.

Agora eu te digo: tem!

Eu conversei com alguns amigos desenvolvedores e fui saber quais dessas novidades têm sido mais usada, e a disputa ficou bastante acirrada entre os pré-processadores preferidos e os frameworks mais utilizados. Ainda assim, na mesma semana acabei lendo um artigo técnico sobre o uso do Sass e por isso resolvi também testá-lo para entender como ele funciona.

Basicamente você começa “instalando” ele em sua máquina. Para os usuários de MAC é bem mais tranquilo que para os usuários de PC, porque para o Sass “rodar“ precisamos que o  Ruby também esteja instalado e isso já é nativo no MAC. De qualquer forma, não é nenhuma experiência traumática. No próprio site do Sass você encontra os dois métodos de instalação.

Eu uso MAC e escolhi instalar o Sass através do Git.

Após clonar o repositório, criei no diretório escolhido um novo arquivo com o nome de “style.scss”. Neste arquivo de folha de estilo, escrevi as seguintes linhas de código:

.content {
backgoround: #000;
font-family: Arial;
font-size: 15px;
p{ line-height: 20px;}
}

Depois abri o terminal, no diretório onde o arquivo .scss foi salvo e digitei:

sass --watch style.scss:style.css

Pronto! A mágica está feita.

Este comando cria um novo arquivo style.css no mesmo diretório traduzindo as linhas digitadas acima em:

.content {
  backgoround: #000;
  font-family: Arial;
  font-size: 15px; }
    .content p {
   line-height: 20px;
}

Neste momento você pode estar pensando: Ah, é legal, mas não vi tanta mágica assim.

Então vamos incrementar um pouco as coisas.

Digite em seu arquivo .scss:

.varios-elementos{
       background:#ccc;
       p{ color:red}
       a{ color:pink}
       input{
         -moz-border-radius: 20px;
         border-radius: 20px;
         -webkit-border-radius: 20px;
         border-left:solid 1px #eaeaeb;
         border-right:solid 1px #eaeaeb;
         border-bottom:solid 1px #eaeaeb; 
         border-top:solid 3px #ccc;
       }
    }

Salve e em seguida seu arquivo style.css estará com:

.varios-elementos {
  background: #ccc; }
  .varios-elementos p {
    color: red; }
  .varios-elementos a {
    color: pink; }
  .varios-elementos input {
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    border-left: solid 1px #eaeaeb;
    border-right: solid 1px #eaeaeb;
    border-bottom: solid 1px #eaeaeb;
    border-top: solid 3px #ccc; }

Percebeu? “.vários-elementos“ foi a classe que criamos, em seguida começamos a escrever as características desta classe e dos elementos que nela continham, de forma bastante intuitiva e direta.

Não tem muito segredo né?

O Sass também permite o uso de variáveis. Por exemplo:

$main-color: #d5d5d5

.botao{
   background: $main-color;
}

O uso de pseudo-elementos:

a {
   color: #ce4dd6;
   &:hover { color: #ffb3ff;}
   &:visited { color: #c458cb; }
  }

O uso de Operações e Funções

#navbar {
        $navbar-width: 800px;
        $items: 5;
        width: $navbar-width;
        li {
            float: left;
            width: $navbar-width/$items - 10px;
            }
        }

E o uso de interpolação: você pode utilizar variáveis não apenas para valores, mas também propriedades ou seletores:

$vert: top;
$horz: left;
$radius: 10px;
.rounded-#{$vert}-#{$horz} {
       border-#{$vert}-#{$horz}-radius: $radius;
       -moz-border-radius-#{$vert}#{$horz}: $radius;
       -webkit-border-#{$vert}-#{$horz}-radius: $radius;
    }

Também é permitido importar outros arquivos, como já é possível nos arquivos CSS tradicionais e também o uso da diretiva “@mixin” que é umas das features mais valorizadas do Sass, onde você pode aproveitar pedaços de códigos com elementos, seletores ou propriedades, simplesmente importando através diretiva “@include“ no arquivo .scss:

@mixin rounded-top-left {
        $vert: top;
        $horz: left;
        $radius: 10px;
        border-#{$vert}-#{$horz}-radius: $radius;
        -moz-border-radius-#{$vert}#{$horz}: $radius;
        -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#navbar li { @include rounded-top-left; }
#footer { @include rounded-top-left; }

Legal né?

Pois então, enquanto eu testava o Sass me perguntava: vale a pena aprender um novo jeito de escrever CSS? E a resposta foi: vale, dependendo do seu objetivo.

Se o tempo para o desenvolvimento for curto, o ideal é manter-se no que você já conhece e sabe fazer. Experimentar, pode dar muito certo e te fazer adquirir ainda mais conhecimento, mas também pode dar errado e você não ter tempo de arrumar, além de atrasar seu cronograma.

Pondere isso, mas não deixe de estudar. Quem sabe numa tarde sem muito job você pode usar o Sass, aprender a aplicá-lo em sua plenitude e dar tudo muito certo quando você for desenvolver projetos a valer.

😉

Até a próxima.

OBS: Pessoal, conforme o comentário abaixo do Duke, existe uma correção a ser feita no que diz respeito à “dependência” do Ruby para a instalação do Sass: