Esta apresentação foi utilizada em um treinamento de front end para alguns colaboradores da CI&T. Todo o material foi criado e apresentado por mim. Alguns termos utilizados como GO!, Armchair, KOAD fazem referência a um projeto e empresas com o qual esse treinamento foi destino. Nessa primeira aula, foi apresentado regras e diretivas. flags e expressões.

1. [Front End Training]
Sass - Aula 03
gisely.lucas@gmail..com

2. Na aula passada ...
● Desenvolvendo em Sass
○ Hierarquia de Seletores
○ Variáveis
○ Mixins
○ Operações
○ Concatenação x Interpolação
Relembrando ...
gisely.lucas@gmail..com

3. ● Desenvolvendo em Sass
○ Concatenação x Interpolação (Exercício)
○ Regras e diretivas
○ Flags
○ Expressões
Agenda
gisely.lucas@gmail..com

4. Concatenação: A operação + pode ser
usada para concatenar strings
Sass
p {
font-family: sans- + “serif”;
}
CSS
p {
font-family: sans-serif;
}
Concatenação de String x Interpolação
Interpolação: encaixar valores
dinâmicos dentro de outros valores.
Sass
$value: featured;
.section-#{$value} {
color: #010203;
}
CSS
section-featured {
color: #010203;
}
Exercício!
gisely.lucas@gmail..com

5. Regras e Diretivas
gisely.lucas@gmail..com

6. ● Permite importar um conteúdo.
● Pode ser utilizado para:
○ Modularização
○ Links
○ Fontes
○ Incluir classes aninhando uma a
outra.
No GO!
● É utilizado principalmente na
modularização e em algumas fontes.
@import
Exemplo:
Arquivo: _example.scss
$primary-color: #333;
.example {
color: $primary-color;
}
Arquivo: _main.scss
.main {
@import “example”;
}
CSS
.main .example {
color: #333;
}Exercício!
gisely.lucas@gmail..com

7. ● Permite estender (herdar)
propriedades de uma classe geral
em outra mais específica.
Boas práticas
Recomendado
É interessante utilizar uma extensão
quando for necessário existir uma classe
genérica e outra específica.
Promovendo assim um reuso de código
@extend
Exemplo:
.carousel__loading--center {
@extend .carousel__loading;
margin-top: -22px;
top: 50%;
}
.carousel__loading {
position: absolute;
top: 100px;
left: 50%;
margin-left: -22px;
[...]
}Exercício!
gisely.lucas@gmail..com

8. ● Possui o mesmo comportamento
que o CSS.
● Pode ser aninhado.
@media
Exemplo:
.sidebar {
width: 300px;
@media screen and (orientation: landscape){
width: 500px;
}
}
CSS
.sidebar {
width: 300px;
@media screen and (orientation: landscape){
.sidebar {
width: 500px;
}
}}
Exercício!
gisely.lucas@gmail..com

9. ● !important: define como valor
principal independente da hierarquia
● !default: cria um valor default para a
variável caso ela não tenha nenhum
valor atribuído.
No GO!
● As flags mais utilizadas são:
!important e !default
Flags
Exemplo:
$prefix-for-webkit: true !default;
a.important {
@extend .notice;
height: 251px !important;
}
Boas práticas
Não recomendado
Utilizar a flag important por qualquer
coisa.
Exercício!
gisely.lucas@gmail..com

10. Expressões
Utilizando SassScript
gisely.lucas@gmail..com

11. @if
● Utiliza os estilos aninhados a ela,
quando o valor for diferente de false
ou null.
@else
● Permite tratar casos, quando não
atender a condição definida.
Condicionais
Exemplo:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == monster {
color: #14eF10;
} @else {
color: #b9b9b9;
}
}
Exercício!
Para se criar estruturas condicionais
aninhadas é preciso utilizar @else if
condição {} aninhado dentro de um
@if
gisely.lucas@gmail..com

12. @for
● Cria um loop utilizando um valor
de start e outro end.
for variável from start through
end
@each
● Cria um loop com base em uma
lista predefinida.
each variável in <list>
Loops
Exemplo:
$type: monster;
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
@each $animal in item1, item2, item3 {
.#{$animal}-icon {
background-image:
url(“#{$animal}.png”);
}
}
Exercício!
gisely.lucas@gmail..com