Sass vs Stylus

Review dos dois melhores pré-processadores na minha opinião

Published in

Tableless

5 min readJun 24, 2016

Quando comecei a usar pré-processadores o meu primeiro foi o Less, usei em apenas um site e era também meu primeiro site responsivo. Escolhi começar pelo Less por ser mais fácil de configurar, na época usei um software visual para transformar o Less e CSS. Desde então faz aproximadamente 5 ou 6 anos que trabalho apenas com pré-processadores.

Logo depois comecei a estudar mais e por conta do Compass passei a utilizar o Sass, foi uma longa jornada e vários projetos feitos com Sass até eu realmente migrar para o Stylus. Ao longo dessa jornada abandonei o Compass, o projeto é pesado, existem opções melhores, gerar sprites não é mais um diferencial e o build sem ele fica muito mais rápido. Outra coisa que mudei com o tempo foi deixar de usar o Sass com Ruby e passar para o Node-sass que é muito mais veloz.

Com o tempo comecei a ouvir falar do Stylus e muita gente falando bem dele, resolvi testar e hoje é meu pré-processador oficial. Eu ainda uso Sass quando o projeto é legado ou no caso de um projeto que trabalhei usando Ionic Framework que é todo feito em Sass, não ia reinventar a roda só para usar Stylus, mas todo projeto novo que participo hoje é feito em Stylus.

Vamos deixar de história e passar para o que interessa, qual a real diferença do Sass e do Stylus. No que se diferenciam, quais os pontos fortes e fracos de cada um deles?

Linguagem base

Sass: Ruby
Stylus: JavaScript

Eu sou programador front-end e lido com JavaScript todos os dias, mas nunca trabalhei com Ruby e infelizmente não teria tanta facilidade para escrever plugins para o Sass. Esse é o primeiro ponto negativo do Sass em relação ao Stylus na minha opinião.

Sintaxe

// Sass (SCSS)
.class {
  background: red;  .child-class,
  .other-child-class {
    background: yellow;
  }  &:hover {
    text-decoration: none;
  }}

// Stylus
.class
  background red  .child-class
  .other-child-class    
    background yellow  &:hover
    text-decoration none

As duas sintaxes são bem parecidas, na real tão parecidas que podem ser confundidas já que as chaves, dois pontos e ponto e vírgula são opcionais no Stylus dependendo da forma que você escreve fica idêntico ao SCSS do Sass. A liberdade no Stylus é uma coisa boa e ruim ao mesmo tempo, você tem a liberdade de escrever da forma que preferir, mas se não definir um padrão cada pessoa que trabalha com você pode acabar escrevendo de uma forma diferente.

No meu caso nós definimos na equipe que vamos usar o estilo "CoffeeCSS" (apelido em referência ao CoffeeScript), sem chaves, sem dois pontos, sem ponto e vírgula.

Trabalhando com cores

// Sass// Retorna uma cor 10% mais clara
background-color: lighten($color, 10%);// Retorna uma cor 10% mais escura
background-color: darken($color, 10%);

// Stylus// Retorna uma cor 10% mais clara
background-color: lighten($color, 10%)
background-color: $color + 10%// Retorna uma cor 10% mais escura
background-color: darken($color, 10%)
background-color: $color - 10%

Basicamente o Stylus implementou da mesma forma do Sass, mas também te dá liberdade de apenas subtrair ou somar uma porcentagem da cor. Uso a segunda forma por ter menos texto e dar o mesmo resultado.

Variáveis e Placeholder

// Sass
$space 20px%placeholder {
  display: inline-block;
  margin-bottom: $space;
}

// Stylus
space = 20px
$space = 20px
@space = 20pxplaceholder
  display inline-block
  margin-bottom $space

No sass se usa $ para variáveis e % para placeholder, no stylus você não é obrigado a prefixar as variáveis e placeholders, mas é uma boa prática para diferenciar do resto do código.

Impossible with Sass

Se até aqui você achou que Sass e Stylus são bem parecidos então vamos entrar na parte começa a ficar interessante. Isso pode gerar muita polêmica, pois nem tudo que irei mostrar é impossível de fazer com Sass porém é mais complicado por necessitar de escrever plugins específicos e não se tratar de algo nativo.

Partial Reference

.foo
  &__bar
    &_baz
      width: 10px

      ^[-1]:hover &
        width: 20px

.foo__bar_baz {
  width: 10px;
}
.foo__bar:hover .foo__bar_baz {
  width: 20px;
}

Property Lookup

#logo
   position: absolute
   top: 50%
   left: 50%
   width: w = 150px
   height: h = 80px
   margin-left: -(w / 2)
   margin-top: -(h / 2)

Você pode definir uma variável dentro da estilização e usar logo a baixo, mas existe uma forma até melhor de fazer isso.

#logo
   position: absolute
   top: 50%
   left: 50%
   width: 150px
   height: 80px
   margin-left: -(@width / 2)
   margin-top: -(@height / 2)

@width e @height são referências ao width e heigh estilizados logo a cima, mas poderia ser herdado como no exemplo a seguir:

.foo
  color #999
  .bar
    color @color

Isso é excelente quando você está criando mixins, placeholders ou componentes.

json(path[, options])

Converte um arquivo json em variáveis separadas por hífen ou num objeto.

{
    "small": "screen and (max-width:400px)",
    "tablet": {
        "landscape": "screen and (min-width:600px) and (orientation:landscape)",
        "portrait": "screen and (min-width:600px) and (orientation:portrait)"
    }
}

json('media-queries.json')

@media small
// => @media screen and (max-width:400px)

@media tablet-landscape
// => @media screen and (min-width:600px) and (orientation:landscape)vars = json('vars.json', { hash: true })
body
  width: vars.width

@Extend de seletores aninhados

Existe um bug amplamente conhecido no Sass quando se usa @extend em seletores aninhados (nested), basicamente o demônio sobe na terra e destrói todo seu lindo código. Para quem nunca ouviu falar disso leia esse artigo, ou esse outro.

O @extend é um recurso muito poderoso do Sass e o Stylus também possui ele, mas a diferença é que não tem esse bug.

Conclusão

Sass e Stylus são muito bons, porém o Stylus tem mais liberdade, é feito em JavaScript e possui algumas features a mais.

O engraçado é que os dois são tão parecidos que alguém criou um conversor SassToStylus, que realmente funciona inclusive, mas que no fim gera um código tão parecido que parece que ele só limpou o que é opcional da sintaxe.

Eu prefiro Stylus e por isso fui bem parcial, mas também já usei muito tempo Sass e levei em consideração coisas que hoje acho muito fácil fazer com Stylus e que antes não fazia com Sass.

Se você tem alguma dúvida, sugestão e/ou correção deixe nos comentários e tentarei responder todos.

Infelizmente não sou o dono da verdade e também erro. Se falei besteira me avise que conserto no texto.