Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
4 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Artigo para quem não conhece ou estava adiando os estudos dessa poderosíssima linguagem pré-processador. Mexa com Sass (no Windows também) e seja mais produtivo! Nesse post abordo rapidamente duas features dessa linguagem e algumas perguntas que já me fizeram nas aulas que ministro aqui na Caelum.
O Sass é uma linguagem baseada em CSS (opa, aí já facilita, não é mesmo?) que depois de compilada gera o bom e velho CSS.
Possui duas sintaxes diferentes, o SASS e o SCSS. Essa última é a que acho mais bacana pela semelhança com CSS normal, a outra é atrelada a indentação.
Duas coisas bacanas que o Sass possui, que você pode ir testando no SassMeister:
Sabe quando você repete a mesma cor no seu CSS umas 500 vezes, aí depois precisa mudar, aí tem que ficar procurando ou dar um Replace? Seria bom se o CSS tivesse como criar variável, atualmente não é possível, mas no Sass é!
Código em Scss:
// Crio a variável $cor-padrao: #069; .btn-primario { // aqui eu chamo a variável: background: $cor-padrao; } .texto-principal { // chamo aqui também: color: $cor-padrao; }
Código compilado, já em CSS:
.btn-primario { background: #069; }
.texto-principal { color: #069; }
E para quem reparou, sim, no Sass dá para você comentar com //, mas esse comentário não vai para o CSS final.
Tem aquele trecho de código que é repetido no CSS inteiro, aí se você precisar colocar uma declaração a mais, teria que alterar em vários lugares.
/\* CSS normal \*/ .desfoque { -webkit-filter: blur(20px); filter: blur(20px); }
No Sass você pode reutilizar esse código em vários lugares criando um mixin:
// Scss
// Crio um mixin com o '@' e dou um nome para ele : @mixin desfoque { -webkit-filter: blur(20px); filter: blur(20px); } // Agora para incluir : .painel img { @include desfoque; max-width: 100%; }
O CSS compilado fica:
.painel img { -webkit-filter: blur(20px); filter: blur(20px); max-width: 100%; }
Agora algumas perguntas e respostas:
Sim! Os mais conhecidos além do Sass são o LESS e o Stylus. Temos até esse artigo aqui onde o Sérgio Lopes comenta sobre o LESS.
Essa pergunta é meio polêmica. Conheço só o Sass e o LESS, mas prefiro o primeiro por achar que é um pouco mais “certinho”. Por exemplo, enquanto no Sass para criar um mixin você usa o @mixin e o inclui dando um @include, no LESS você cria uma classe CSS comum e chama ela lá meio da sua regra CSS.
Diria que se você aprende um, você automaticamente sabe 80% de todos. Então, não. Segura na mão de um deles e segue a vida. Mas acho válido ao menos conhecer os outros.
E eu prefiro Windows. São só ferramentas, muita calma, seu cliente ou chefe não se importa com qual ferramenta você utiliza, ele quer é o resultado.
Outro ponto pró-Sass:
O Bootstrap na versão 4, atualmente em Alpha, trocou o LESS pelo Sass. Quando anunciaram essa troca, muita gente comentou que esse seria o último prego no caixão do LESS. Acredito que concorrência é sempre bom para todo mundo.
Sim! Só as variáveis já deixam tudo mais produtivo, aí tem os mixins, extends, placeholder, funções, etc. Tudo lindo.
Não! O Sass não vai deixar seu CSS melhor ou mais rápido, boas práticas no CSS valem para o Sass também! Coisas como não repetir código e tentar não ficar sobrescrevendo declarações.
Também não! Se for interessante um tutorial de como trabalhar com Sass no Windows posso criar outro artigo depois. Só dê um "alô" nos comentários. (Edit: a galera pediu, fizemos!)
Há muitos recursos interessantes que o Sass possui como:
Existe até um framework chamado Compass, que ficou bem conhecido por criar sprites CSS de forma automática, é realmente mágico quando você usa isso na primeira vez.
Eu mostro o Compass e alguns desses recursos no curso online de Sass no Alura, dá uma olhada no conteúdo do curso depois. Se gostar de ler, escrevi um livro de Sass em que mostro todos esses recursos também.
Você usa/usava qual pré-processador? Não utiliza nenhum? Por qual motivo? E para você que já trabalha com Sass, prefere qual das sintaxes?
Avalie este artigo
O que é Front-end, Back-end e Full Stack? Aprenda as diferenças entre essas áreas
Ler mais
JavaScript replace: manipulando Strings e regex
Ler mais
HTML, CSS e Javascript, quais as diferenças?
Ler mais