O que é Sass?

Quando pensamos em produtividade, logo nos perguntamos e pesquisamos como aumentá-la sem grandes impactos. Então, os pré-processadores e frameworks para CSS vem suprir essa necessidade. Com vocês, um pouco de Sass.

Publicado em
O que é Sass?

Quando pensamos em produtividade, logo nos perguntamos e pesquisamos como aumentá-la sem grandes impactos. Então, os pré-processadores e frameworks para CSS vem suprir essa necessidade. Com vocês, um pouco de Sass.

Se você é um desenvolvedor front-end que está atualmente no mercado, já ouviu/leu palavrinhas como LESS, Foundation e Sass. Alguns sabem do que estamos 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!

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:

 
Variáveis
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.

 
Reutilizando código com Mixins
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:

Bacana, mas há outros pré-processadores além do Sass?

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.

Mas qual é o melhor?

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.

Preciso aprender todos?

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.

Outros recursos do Sass?

Há muitos recursos interessantes que o Sass possui como:

Funções de cor;
Extend;
Aninhamento de seletores CSS;
Operações matemáticas;
Etc.
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.

Hilton L. Bacelar

Hilton L. Bacelar

Experiência em desenvolvimento Web com foco em PHP Graduado em Sistemas de Informação. Work Control Developer Certified.

https://github.com/bacelar9
Sobre o Mariadb 2600

Sobre o Mariadb

Não há nenhuma necessidade de converter um banco de dados para migrar para o MariaDB. MariaDB é um verdadeiro substituto para o MySQL!

Olá, deixe seu comentário para O que é Sass?

Deixe um comentário