25

Hoje em dia é difícil ver pessoas escrevendo "CSS à moda antiga" por causa dos pré-processadores que facilitam a escrita removendo repetições de código, e simplificação de sintaxe.

Gostaria de entender quais as diferenças (de sintaxe e eventuais vantagens/desvantagens) que eles possuem, se eles cumprem o mesmo papel, ou se possuem uma abordagem diferente.

4
  • 2
    +1 - Existe uma outra pergunta que refere somente Sass e Less, acho que Stylus é um elemento de comparação importante.
    – Sergio
    Commented 30/11/2015 às 21:54
  • 5
    Antes de votarem para fechar por ser baseada em opinoes. A pergunta e bastante objectiva, pede uma comparacao analitica entre os 3 preprocessadores, nao pergunta qual deles e o melhor.
    – jpmnteiro
    Commented 1/12/2015 às 8:55
  • Não acho que ela seja baseada em opiniões, mas a acho muito ampla (várias perguntas em uma só). Commented 22/12/2015 às 5:18
  • se perguntar para dez pessoas qual seu pre processador favorito, você receberá onze respostas diferentes.
    – Cleiton
    Commented 23/12/2015 às 3:19

2 Respostas 2

15
+50

se eles cumprem o mesmo papel, ou se possuem uma abordagem diferente.

Essa sua frase define o tom da sua pergunta. Vou procurar basear minha resposta em ambos os pontos citados.

Eles cumprem o mesmo papel?

Basicamente, sim. O papel do pré-processador é fornecer o ferramental necessário para que seja possível contornar alguns problemas recorrentes da última especificação do CSS. Já existe um draft para a próxima, que promete facilitar bastante a nossa vida, e quando a maioria dos browser já a tiver implementado, o cenário dos pré-processadores vai, com certeza, mudar bastante. Vale lembrar que SASS, LESS, Stylus tem como propósito gerar arquivo(s) .css que respeitem a terceira especificação. Então, quando o os seletores do CSS 4 chegarem, o seu código vai continuar funcionando sem problema nenhum, mas algumas das features dos pré-processadores vão tornar-se obsoletas. Para efeitos de curiosidade, existem coisas como o Post CSS, cuja intenção é permitir que o desenvolvedor escreva código contendo os novos seletores e faça uma espécie de downgrade para o CSS 3. Não vou falar sobre isso pois não é esse o foco da resposta, mas aqui tem um artigo que trás o básico.

É interessante notar que esse cenário é mutável. Amanhã, o CSS 4 vai estar aí, e existiram pré-processadores que irão solucionar problemas que deverão ser corrigidos na especificação 5, e por aí vai. Alguns dos principais pontos que os pré-processadores facilitam hoje são

  1. Variáveis, loops, condicionais, ...

    CSS não é uma linguagem de programação. CSS é uma folha de estilos, i.e., uma série de regras que devem ser seguidas para a apresentação das tags. Essa folha é uma lista, e o browser a interpreta como tal. Isso significa que, sem os pré-processadores, quando era necessário atribuir a mesma cor para diferentes seletores, você tinha que rebolar para fazer uma jogada inteligente misturando os conceitos de herança (inherit) e cascateamento, mas eventualmente teria que declarar um color: #f09363 em diversos pontos do seu código. E, eventualmente, esses valores mudam, e aí você paga todos os seus pecados fazendo essa modificação manualmente. Ou então, sprites. Na empresa que trabalho, usamos sprites para servir nossas imagens, e fazer o calculo das background-position na mão só serve pra atormentar o estagiário. Com pré-processadores, da pra resolver isso com um loop.

  2. Manutenção

    Os exemplos acima já servem para mostrar que o CSS pode se tornar um monstro na hora da manutenção. Pré-processadores tornam esse processo muito menos doloroso.

  3. Frameworks

    Existem frameworks construídos com base em pré-processadores que fazem coisas excelentes. O susy é um framework de grids agnóstico, construído em cima do SASS. O Compass, além de trabalhar muito bem com vendor prefixes, consegue criar sprites pra você a partir de uma imagem. Bom, não?

A lista de vantagens é grande, mas tem até gente dizendo que você não deve usá-los. Claro que isso varia de pessoa pra pessoa. O fato é que a ideia de todos os pré-processadores é a mesma: facilitar a vida do desenvolvedor. Essa lista tem 10 pré-processadores diferentes, além dos 3 que são o foco da pergunta. Se você analisar cada um deles, vai ver que a proposta é a mesma.

Possuem uma abordagem diferente?

Sim. Falando especificamente dos 3 principais:

  1. SASS

    SASS é escrito em ruby, e tem duas sintaxes diferentes, conhecidas como .scss e .sass. A primeira é equivalente a do .css, e a segunda é uma linguagem indentada, como o Python. É o mais popular dos 3 e tem uma série de frameworks disponíveis. Vale apontar que as versões do Ruby SASS e do LibSASS são levemente diferentes.

  2. LESS

    Foi originalmente escrito em ruby, mas mais tarde portado para o JavaScript. Pode funcionar server-side, como um módulo do node, é o único dos 3 compatível com Rhino (até onde eu sei) e, o mais incrível, pode ser usado do lado do cliente. Não sei porquê alguém faria algo desse tipo, sendo que onera mais ainda o lado do cliente, e não consigo ver nenhum ponto positivo nessa abordagem. Se alguém souber de alguma vantagem, diz aí.

  3. Stylus

    Também escrito em JavaScript, o Stylus é o que possuí a sintaxe mais flexível dentre os três. Este código

    p
       color black
    
    span{
       color blue
    }
    
    div
       color: green;
    

    compila para

    p {
       color: #000;
    }
    span {
       color: #00f;
    }
    div {
      color: #008000;
    }
    

    Você pode omitir os caracteres especiais {}, ;, : e fazer uma combinação dessas omissões que o Stylus vai entender sem problemas. Eu, particularmente, acredito que isto não seja muito inteligente. Se você se torna conivente com erros de sintaxe em uma linguagem, vai acabar portando isso para outra, e basicamente nenhuma outra permite esse tipo de coisa.

Em termos de variáveis, o SASS exige que elas iniciem com o caracter $. O LESS, por sua vez, determina o caracter @. Já o Stylus é (novamente) mais flexível, e permite praticamente qualquer coisa (cuidado com palavras reservadas). A única obrigatoriedade é um espaço entre o sinal de igual e o nome da variável e entre o sinal de igual e o valor. Ou seja

minha_cor = blue

é permitido, enquanto

minha_cor=blue

não.

De resto, eles são parecidos entre sí, uma vez que tem o mesmo intuito. Claro que cada um deles tem seus métodos próprios e suas particularidades, o que podem os tornar mais ou menos viáveis para um determinado projeto. Neste link você encontra uma comparação feita quase que exclusivamente em cima de sintaxe. E neste último, uma tabelona comparando quase que tudo entre os 3. Caso você pense em migrar de um pré-processador para outro, receba mais esta tabela

1
  • 3
    1+, excelente explanação, até agora a melhor ao meu ver, respondeu de forma objetiva e com bastante informações adicionais para expandir o conhecimento. Commented 26/12/2015 às 14:37
10

Pré-processadores de CSS3 são linguagens com o propósito de ajudar na criação de estilos compatíveis com todos os navegadores e com diversos recursos para nos ajudar, principalmente quando temos CSS's enormes.

O mais importante é reconhecer a sintaxe, e para nossa sorte todos esses pré-processadores usam uma linguagem semelhante entre si.

Sass e LESS

Ambos usam sintaxe padrão CSS e isso faz com que ele se torne muito fácil. Sass usa a extensão .scss e o LESS usa .less.

O código abaixo funciona no Sass ou LESS.

/* style.scss or style.less */
h1 {
  color: #0565CC;
}

É importante notar que Sass também tem uma sintaxe mais antiga, que omite ponto e vírgula e chaves. Embora este ainda esteja por aí, é velho e não poderá usá-lo para além deste exemplo.

A sintaxe usa a extensão de arquivo .sass e se parece com isto:

/* style.sass */
h1
  color: #0565CC  

Stylus

A sintaxe para Stylus é muito mais detalhada. Usando a extensão do arquivo .style, Stylus aceita a sintaxe CSS padrão, mas também aceita algumas outras variações, dois pontos e ponto e vírgula são todos opcionais. Por exemplo:

/* style.styl */
h1 {
  color: #0982C1;
}

/* omitor colchetes */
h1
  color: #0982C1;

/* omitir dois pontos e virgular */
h1
  color #0982C1

Usar diferentes variações do mesmo estilo também é válido, então o seguinte exemplo irá compilar sem erros:

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

Cada um dos arquivos acima irá compilar para o mesmo CSS. Você pode usar sua imaginação para ver o quão útil pode ser para seu projeto.

Com essas técnicas você não precisará escrever a mesma cor ou padrão várias vezes, utilizando variáveis você consegue diminuir e simplificar muito seu código.

Não vejo vantagem em usar uma técnica X em relação a Y, vai do gosto do programador.

Mas uma coisa sem sombra de dúvidas é o ganho em relação a organização do código, como você monta seu CSS e trabalha nele.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .