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:
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:
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:
Salve e em seguida seu arquivo style.css estará com:
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:
O uso de pseudo-elementos:
O uso de Operações e Funções
E o uso de interpolação: você pode utilizar variáveis não apenas para valores, mas também propriedades ou seletores:
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:
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:
<p>
</p>
<p>
É isso aí ;).
</p>
<p>
</p>
</div>
Apoio: Conheça a NET TV e aproveite os diversos canais, em diversos planos. Confira as vantagens de contratar a NET TV e quais os descontos mais recentes da operadora!