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;
}

10. Valor padrão da variável
#main {
$width: 5em !global;
width: $width;
}
.subtitulo {
width: $width;
}
#main {
width: 5em;
}
.subtitulo {
width: 5em;
}

11. Valor padrão da variável
$width: 6em;
#main {
$width: 5em !global;
width: $width;
}
.subtitulo {
width: $width;
}
#main {
width: 6em;
}
.subtitulo {
width: 6em;
}

12. Nesting
Sass
.artigo {
.titulo { color: red; }
.subtitulo { color: orange; }
}
Css Gerado
.artigo .titulo { color: red; }
.artigo .subtitulo { color: orange; }

13. Nesting
Sass
.item a {
color: darkgreen;
&:hover {color: green}
}
Css Gerado
.item a { color: darkgreen; }
.item a:hover { color: green; }

14. Nesting
Sass
.item {
.submenu & { color: red; }
.menu & { color: orange; }
}
Css Gerado
.submenu .item { color: red; }
.menu .item { color: orange; }

15. Nesting
Sass
.item {
.submenu & { color: red; }
.menu & { color: orange; }
}
Referência ao pai do
seletor
Css Gerado
.submenu .item { color: red; }
.menu .item { color: orange; }

16. Nesting de propriedade
Sass
.item {
margin: { top: 1em; bottom: 1em }
}
Css Gerado
.item {
margin-top: 1em;
margin-bottom: 1em
}

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;
}

18. Extend
Será gerado:
.box, .alert {
display: block;
border: 1px solid gray;
}
.alert {
color: red;
}
Exemplo: http://sassmeister.com/gist/2234c36162872611e16c

19. Placeholder selectors
Em alguns momentos, queremos que seja
gerado o css apenas quando utilizamos a
extensão. Nesse caso utilizamos os
placeholders selectors.

20. Placeholder selectors
%box {
display: block;
border: 1px solid gray;
}
.alert {
color: red;
}

21. Placeholder selectors
%box {
display: block;
border: 1px solid gray;
}
.alert {
color: red;
}
.alert {
color: red;
}

22. Placeholder selectors
%box {
display: block;
border: 1px solid gray;
}
.alert {
@extend %box;
color: red;
}
.alert {
display: block;
border: 1px solid gray
}
.alert {
color: red;
}

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.

24. mixins
Ex.:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px) }

25. mixins
É possível adicionar valores padrões aos
parâmetros. Ex.:
@mixin border-radius($radius: 10px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius }

26. mixins
É possível adicionar valores padrões aos
parâmetros. Ex.:
@mixin border-radius($radius: 10px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius }

27. Condicionais - @if
$direcao: ‘top’;
.barra-fixa {
position: fixed;
@if $direcao == ‘top’ {
top: 0;
}
@else {
bottom: 0;
}
}

28. loop - @for
@for $i from 1 through 5 {
.col-#{$i} {
width: ($i * 100%/5);
}
}
.col-1 { width: 20%;}
.col-2 { width: 40%;}
[...]
.col-5 { width: 100%;}

29. loop - @each
@each $icon in bola, quadrado, triangulo {
.icon#{$icon} {
background: url(‘#{$icon}.jpg’);
}
}
.icon-bola { background: url(‘bola.jpg’);}
.icon-quadrado { background: url(‘quadrado.jpg’);}
.icon-triangulo { background: url(‘triangulo.jpg’);}

30. loop - @each
$i: 3;
@while $i > 0 {
.h#{$i} {
font-size: #{$i}em;
}
$i: $i - 1;
}
.h3 { font-size: 3em; }
.h2 { font-size: 2em; }
.h1 { font-size: 1em; }

31. funções
● darken
● ligthen
● saturate
● grayscale
● round
● ceil
● percentage

32. Fim

33. Obrigada!