Sass

É a abreviação de "Syntactically Awesome Style Sheets." Sass é uma extensão de folhas de estilo em cascata (CSS), a linguagem usada para definir o layout e a formatação de documentos HTML. Ele usa a sintaxe CSS totalmente compatível, mas oferece recursos adicionais, como variáveis CSS e regras aninhadas, que tornam o CSS mais eficiente e fácil de editar.

Uma das desvantagens do CSS padrão é que ele não oferece suporte a variáveis. Por exemplo, se você tiver vários estilos da mesma cor, precisará definir a cor separadamente para cada estilo. Se decidir mudar a cor, terá de alterá-la em todas as ocorrências do documento CSS. Com o Sass, você pode definir a cor como uma variável e atribuir essa variável a todos os estilos que a utilizam. Se decidir mudar a cor, precisará alterá-la apenas uma vez — no local em que ela é definida inicialmente no documento.

O exemplo abaixo mostra como definir e usar uma variável CSS no Sass.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

O Sass também oferece suporte a regras aninhadas, permitindo que os desenvolvedores escrevam códigos mais eficientes. No exemplo abaixo, a classe .button está aninhada no estilo #top p.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

Quando compilado, o código acima produzirá o seguinte CSS:

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Embora o Sass ofereça vários benefícios aos desenvolvedores web, os documentos Sass não são reconhecidos pelos navegadores da web. Portanto, um arquivo Sass precisa primeiro ser compilado em CSS antes de ser usado em um documento HTML. Isso pode ser feito localmente antes de enviar o CSS para o servidor web usando programas como Compass.app ou Koala. Ele também pode ser compilado no servidor usando um script PHP ou Ruby que compile Sass em CSS.