Sass

Significa "Folhas de estilo sintaticamente impressionantes". Sass é uma extensão de folhas de estilo em cascata (CSS), a linguagem usada para definir o layout e a formatação de HTML documentos. Ele usa CSS totalmente compatível sintaxe, mas fornece 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 suporta variáveis. Por exemplo, se você tiver vários estilos da mesma cor, precisará definir a cor separadamente para cada estilo. Se você decidir alterar a cor, deverá alterá-la para todas as instâncias no documento CSS. Com o Sass, você pode definir a cor como uma variável e atribuir a variável a todos os estilos que a usam. Se você decidir alterar a cor, precisará alterá-la apenas uma vez - onde é definida inicialmente no documento.

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

$ myColor: #00695C;

.pageTop {cor de fundo: $ myColor; }
.infoText {color: $ myColor; }
.pageBottom {cor de fundo: $ myColor; }

O Sass também suporta regras aninhadas, permitindo que os desenvolvedores escrevam códigos mais eficientes. No exemplo abaixo, o .botão classe está aninhada dentro do #top p estilo.

#top p
{
cor: #004D40;

.botão
{
cor de fundo: #039BE5;
Cor: #FFF;
}
}

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

#top p {color: #004D40; }
#top p .botton {cor de fundo: #039BE5; cor: #FFF; }

Enquanto o Sass oferece vários benefícios para desenvolvedores da web, Documentos Sass não são reconhecidos por navegadores da web. Portanto, um arquivo Sass deve primeiro ser compilado em CSS antes de ser usado em um documento HTML. Isso pode ser feito localmente antes de fazer o upload do CSS no servidor da web usando um programa como Compass.app or Coala. Também pode ser compilado no servidor usando um PHP or Rubi script que compila Sass em CSS.