CSS menos sofrido com Sass

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:

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.

 

Besteira, prefiro o LESS

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:

Bootstrap fechando o caixão do LESS

 

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.

 

Pré-processador é só isso? Uma maneira mais bacana de escrever CSS?

Sim! Só as variáveis já deixam tudo mais produtivo, aí tem os mixins, extends, placeholder, funções, etc. Tudo lindo.

 

Sass então deixa meu CSS melhor! Que legal!

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.

 

Preciso usar Linux ou Mac para trabalhar com Sass?

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!)

 

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.

 

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?

 

35 Comentários

  1. Vandré Paulo 04/11/2015 at 10:04 #

    Objetivo, claro e direto… Bela explicação! Parabéns!!

  2. Thalles 04/11/2015 at 11:30 #

    Muito maneiro seu post Natan. Fiz o curso de vocês no início desse ano aqui no Rio de Janeiro e achei sensacional. Voltei a usar Mac tem um mês e minha produtividade aumentou bastante com todas as ferramentas, mas eu ainda não consegui colocar na minha cabeça para usar estes pré processadores e não tenho uma opinião formada em relação de qual seria o melhor.

  3. Henrique Lopes 04/11/2015 at 11:42 #

    Shoow Natan! Ótimo post, estou começando a usar o Sass e ele facilita muito no desenvolvimento também, não apenas para manutenção de código.
    Abraço

  4. Felipe 04/11/2015 at 12:00 #

    Olá Natan,

    Poderia fazer um tutorial de como usar SASS no Win?

    Obrigado.

  5. Marcio 04/11/2015 at 12:47 #

    Depois que se começa a usar o SASS fica difícil ficar sem

  6. Alisson 04/11/2015 at 12:59 #

    Muito bom o artigo, já vinha estudando SASS a um tempo!

  7. Ritielle 04/11/2015 at 15:10 #

    Muito bom o Post!!! Preciso saber mais a respeito do Sass.
    Abraços

  8. Leonardo 04/11/2015 at 16:58 #

    Sass é vida!

  9. Rodolfo Oliveira 04/11/2015 at 17:11 #

    Dá para integrar fácil com o visual studio, sublime ou atom?

  10. Eduardo 04/11/2015 at 18:11 #

    Bom, meu primeiro contato se tratando de Pré-processadores, foi com LESS. Gostei um pouco, mas depois acabei deixando de lado e passei a usar a forma convencional CSS puro.
    E a dois meses, venho utilizando o SASS, que na minha opinião, está sendo a melhor forma de escrever CSS.

  11. Natan Souza 04/11/2015 at 19:15 #

    Oi Rodolfo, beleza?
    Nada na vida é fácil 😛
    Para o highlight da sintaxe existem alguns plugins para isso, sei que existe para o Sublime, para o Atom e o VS deve ter também.
    Para compilar os .SCSS de forma automática, você pode usar ele com a opcao ‘watch’, ou um task runner como o Gulp ou o Grunt para isso.

  12. Natan Souza 04/11/2015 at 19:18 #

    Oi Felipe, beleza? Posso fazer sim!

  13. Luis Felipe 04/11/2015 at 19:24 #

    Muito bacana o artigo Natan! 🙂

    Uma dica pra galera: EVITEM ao máximo o uso do Compass. Apesar de ajudar com a inclusão de vários mixis, ele atrapalha(e muito!), pois causa uma enorme lentidão na compilação!

  14. Marquinhusg Gonçalves 04/11/2015 at 20:27 #

    Ótimo artigo Natan, então já conhecia os 3 pré processadores citados mas não tinha usado nenhum, no atual projeto que estou acabei incluindo e estou gostando bastante, mas estou usando poucos recursos utilizo mais as variáveis e os mixins e já da um bom adianto, para gerar todo o projeto utilizo o Gulp que da uma mão para compilar, já penso em migrar para o Stylus porque estou tendo um grande feedback positivo tudo com calma rsrs um grande abraço.

  15. Douglas Oliveira 05/11/2015 at 16:40 #

    Boa, Natan!
    Com certeza o uso de task runner é a melhor opção para compilação de pre processadores e minificaçao do CSS compilado!

  16. Lucas Moreira 05/11/2015 at 23:04 #

    Show de bola! Parabéns pelo post.

  17. Adriano Caheté 06/11/2015 at 13:55 #

    @Rodolfo Pro VS dá pra compilar/ter o highlight com o plugin Mindscape Workbench (http://www.mindscapehq.com/products/web-workbench). É free pra compilar SASS, pago pra LESS.
    Ou você pode usar um compilador externo, tipo o Prepros (https://prepros.io/).

    @Natan, ótimo texto! Eu só adicionaria ali no mixin pra esperar um parâmetro, invés de ser fixo. Assim o código fica mais utilizável (e não é necessário criar outro mixin pra fazer um com 30px, por exemplo).

  18. Cleiton Rodrigues 06/11/2015 at 15:59 #

    Muito bom o artigo. Seria muito bom uma abordagem do SASS no Windows como você sugeriu. Eu trabalho com Windows é sempre um sofrimento para instalar/configurar todos esses ambientes de desenvolvimento.

  19. Natan Souza 06/11/2015 at 18:04 #

    Concordo totalmente. Se fosse com o mesmo valor o bacana seria um extend e um placeholder lindão ali. Obrigado pelo feedback! 🙂

  20. Tiago Vasconcelos 06/11/2015 at 21:46 #

    Parabens pelo post Natan, só para acrescentar é importante falar que esses pré-processadores tem um vilão que muitas vezes passa despercebido pelos dev, se for adicionado uma class numa hierarquia por conta de um estilo em comum ele pode acabar gerando código CSS desnecessário, e muita hierarquia pode ser tornar dificil de ler e dar manutenção, onde eu trabalho adotamos uma regra de no máximo três niveis na hierarquia dele.

  21. Matheus Henrique 10/11/2015 at 12:51 #

    Alguém sabe de um plugin para estar utilizando o SASS no eclipse ?, toda hora que vou realizar ajustes no design de projetos tenho que ficar abrindo o Sublime, se houvesse direto no eclipse ficaria mais facil.

  22. Fabiano Cardoso 12/11/2015 at 04:31 #

    Excelente explicação.
    Fiquei com interesse em ler mais sobre o assunto.
    Obrigado.

  23. Victor Hugo 19/11/2015 at 11:53 #

    É interessante um tutorial de como trabalhar com Sass no Windows 🙂

  24. Edson 30/11/2015 at 09:15 #

    Natan, bom dia.

    Ótimo artigo, muito bom mesmo.

    Como você mesmo disse no artigo que poderia criar um sobre como utilizar no Win, eu também gostaria de aprender se puder escrever.

    Agradeço.

    Abraço.

  25. Renan Lara 04/12/2015 at 17:27 #

    Caracas, animal esse artigo hein!
    Ficou excelente Natan. Eu uso o Sass já faz pouco tempo, quero aprender mais coisas nele. E acho muuuito bom, agilizou demais o trabalho.

  26. Akyama de Souza Vieira 20/01/2016 at 11:06 #

    Olá Natan tudo bem?
    Sou estudante da alura, e aprendi java pra web, claro tenho muito o que me aprofundar, mas agora estou procurando métodos para melhorar o meu front-end, PrimeFaces cru é feio demais, e o template pago é caro, e não sei nem se é performático. Fiz alguns testes com bootstrap e gostei, também penso em fazer o front-end todo em material design. Gostaria de saber se estou no caminho certo. Abraços!

  27. Natan Souza 21/01/2016 at 09:52 #

    Opa, blz? Depende do seu objetivo. Se você quiser focar no back-end, acho válido usar esses caras (dá uma olhada no materializecss.com). Se o foco for no front, acho bacana fazer tudo do 0. Isso para criar uma base sólida de conhecimento, para não depender desses frameworks prontos. Um lugar que a galera também posta dúvidas desse tipo é o GUJ. Espero ter ajudado. 🙂 Abcs!

  28. Romeu Rezende 20/05/2016 at 16:24 #

    Muito Bom!!! esta na dúvida de qual pré-processador utilizar com a equipe… Valew Natan

  29. Romeu Rezende 20/05/2016 at 16:24 #

    *Estava 🙂

  30. Gisele 15/06/2016 at 10:03 #

    Como faz no Bootstrap com o SASS, pra eliminar os col-md…?

  31. Natan Souza 15/06/2016 at 10:28 #

    Você pode extender as classes das grids usando o @extend, com uma nomenclatura de classes relacionada mais ao conteúdo, e menos a aparência. Recomendo esse post do Sitepoint que explica como fazer.

  32. Danilo 04/07/2016 at 10:00 #

    Um artigo objetivo. Um daqueles que a gente precisa

  33. Gisely 10/08/2016 at 17:53 #

    Adorei.
    Claro e objetivo.

  34. Murillo R. 25/08/2016 at 10:14 #

    Bem legal o post.

    Só acho chato esses comentários de que estávamos com preguiça de correr atrás ou outros que falam pra procurar direito no Google, e vcs acham que chegamos nesse post por onde?

Deixe uma resposta