Sass é uma linguagem de extensão CSS que adiciona recursos, como variáveis, aninhamento, mixins e muito mais.
Sass (e outros pré-processadores, como [Less](http://lesscss.org/)) ajudam os desenvolvedores a escrever código de fácil manutenção e DRY (Do not Repeat Yourself).
Sass tem duas opções de sintaxe diferentes para escolher. SCSS, que tem a mesma sintaxe de CSS, mas com os recursos adicionais de Sass. Ou Sass (a sintaxe original), que usa o recuo, em vez de chaves e ponto e vírgula.
Este tutorial é escrito usando SCSS.
Se você já está familiarizado com CSS3, você será capaz de pegar Sass de forma relativamente rápida. Ele não fornece quaisquer novas opções de estilo, mas sim as ferramentas para escrever sua CSS de forma mais eficiente e fazer a manutenção mais fácilmente.
```scss
// Comentários de linha única são removidos quando Sass é compilado para CSS.
/* Comentários multi-line são preservados. */
/*Variáveis
==============================*/
/* É possível armazenar um valor CSS (tais como a cor) de uma variável.
Use o símbolo "$" para criar uma variável. */
$primary-color: #A3A4FF;
$secondary-color: #51527F;
$body-font: 'Roboto', sans-serif;
/* Você pode usar as variáveis em toda a sua folha de estilo.
Agora, se você quer mudar a cor, você só tem que fazer a mudança uma vez. */
body {
background-color: $primary-color;
color: $secondary-color;
font-family: $body-font;
}
/* Quando compilar ficaria assim: */
body {
background-color: #A3A4FF;
color: #51527F;
font-family: 'Roboto', sans-serif;
}
/ * Este é muito mais fácil de manter do que ter de mudar a cor
cada vez que aparece em toda a sua folha de estilo. * /
/*Mixins
==============================*/
/* Se você achar que você está escrevendo o mesmo código para mais de um
elemento, você pode querer armazenar esse código em um mixin.
Use a diretiva '@mixin', além de um nome para o seu mixin. */
@mixin center {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
/* Você pode usar o mixin com '@include' e o nome mixin. */
div {
@include center;
background-color: $primary-color;
}
/* Apoś compilar ficaria assim: */
div {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
background-color: #A3A4FF;
}
/* Você pode usar mixins para criar uma propriedade estenográfica. */
@mixin size($width, $height) {
width: $width;
height: $height;
}
/* O que você pode invocar passando argumentos de largura e altura. */
.rectangle {
@include size(100px, 60px);
}
.square {
@include size(40px, 40px);
}
/* Isso compilado ficará assim: */
.rectangle {
width: 100px;
height: 60px;
}
.square {
width: 40px;
height: 40px;
}
/*Funções
==============================*/
/* Sass fornece funções que podem ser utilizados para realizar uma variedade de
tarefas. Considere o seguinte */
/* Funções pode ser chamado usando seu nome e passando o
argumentos necessários */
body {
width: round(10.25px);
}
.footer {
background-color: fade_out(#000000, 0.25)
}
/* Compiles to: */
body {
width: 10px;
}
.footer {
background-color: rgba(0, 0, 0, 0.75);
}
/* Você também pode definir suas próprias funções. As funções são muito semelhantes aos
mixins. Ao tentar escolher entre uma função ou um mixin, lembre-
que mixins são os melhores para gerar CSS enquanto as funções são melhores para
lógica que pode ser usado em todo o seu código Sass. Os exemplos
seção Operadores Math 'são candidatos ideais para se tornar um reutilizável
função. */
/* Esta função terá um tamanho de destino eo tamanho do pai e calcular
Alguma vez você já se perguntou se Sass é um acrônimo ou não? Você provavelmente não tem, mas vou dizer-lhe de qualquer maneira. O nome do idioma é uma palavra, "Sass", e não uma sigla.
Porque as pessoas estavam constantemente a escrevê-lo como "SASS", o criador da linguagem de brincadeira chamou de "StyleSheets Sintaticamente Incríveis".
## Prática Sass
Se você quiser jogar com Sass em seu navegador, vá para [SassMeister](http://sassmeister.com/).
Você pode usar uma sintaxe, basta ir para as configurações e selecionar Sass ou SCSS.
## Compatibilidade
Sass pode ser usado em qualquer projeto, desde que você tenha um programa para compilá-lo
em CSS. Você vai querer verificar se o CSS que você está usando é compatível
com os seus navegadores de destino.
[QuirksMode CSS](http://www.quirksmode.org/css/) e [CanIUse](http://caniuse.com) são ótimos recursos para verificação de compatibilidade.
