O documento descreve as principais funcionalidades do pré-processador Sass, incluindo: variáveis, escopo e valores padrão de variáveis, nesting, extend, placeholders, mixins, condicionais, loops e funções. O Sass permite escrever CSS de forma mais organizada e reutilizável através desses recursos.
2. Sintaxe CSS
O CSS (Cascading Style Sheet) é uma folha
de estilo onde é determinado como será
apresentado um documento escrito com uma
linguagem de marcação ao usuário
seletor {
propriedade: valor;
propriedade: valor;
}
3. Variáveis
$nome-da-variável: valor;
O valor pode ser:
● String - ‘Texto’;
● Cor - ‘#333333’
● Números - 1em;
● Boolean - true;
● Lista - a, b, c;
4. Variáveis
As variáveis podem ser sobreescritas:
$cor-principal: black;
$cor-principal: white;
.titulo { color: $cor-principal; }
Ao final será gerado:
.titulo { color: white; }
5. Scopo da variável
.titulo {
$cor: red;
color: $cor;
}
.subtitulo {
color: $cor;
}
6. Scopo da variável
.titulo {
$cor: red;
color: $cor;
}
.subtitulo {
color: $cor;
}
Erro de sintaxe
Undefined variable:
“$cor”
7. Scopo da variável
$cor: red;
.titulo {
$cor: blue;
color: $cor;
}
.subtitulo {
color: $cor;
}
8. Scopo da variável
$cor: red;
.titulo {
$cor: blue;
color: $cor;
}
.subtitulo {
color: $cor;
}
.titulo {
color: blue;
}
.subtitulo {
color: red*;
}
* a partir da versão 3.4.7
9. Valor padrão da variável
#main {
$width: 5em !global;
width: $width;
}
.subtitulo {
width: $width;
}
17. Extend
No Sass é possível extender as regras de
outras classes através do @extend.
.box {
display: block;
border: 1px solid gray;
}
.alert {
@extend .box;
color: red;
}
19. Placeholder selectors
Em alguns momentos, queremos que seja
gerado o css apenas quando utilizamos a
extensão. Nesse caso utilizamos os
placeholders selectors.
23. mixins
Mixins cria uma diretiva, semelhante a uma
função, a qual agrupa-se um conjunto de
regras a qual você gostaria de reutilizar no
site. Para declarar é utilizado @mixin e para
utilizar o @include.
Um exemplo clássico é utilizá-lo para
adicionar prefixos dos browsers.