O documento discute conceitos de Sass como pré-processadores, variáveis, mixins, operações e seletores. Ele apresenta exemplos de como utilizar essas ferramentas em Sass para escrever código CSS de forma modularizada e reutilizável.

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

2. Na aula passada ...
O que são pré-processadores?
O que é Sass?
Por que usar Sass?
Mas e no GO!
Desenvolvendo em Sass
Modularização e importação
Aninhamento
Hierarquia de Seletores
Relembrando ...
gisely.lucas@gmail..com

3. Desenvolvendo em Sass
Hierarquia de Seletores
Variáveis
Mixins
Operações
Concatenação x Interpolação
Agenda
gisely.lucas@gmail..com

4. Estilo no elemento
tag.class
Pai e filho
.section-component .main
Irmãos
h1, h2, h3
Filhos diretos
p>h1
Dentre outros
Seletor de parentesco &
Hierarquia de seletores
Exemplo
div {
&.no-hover {
background-color: transparent;
}
}
.item {
.item-txt {
background-color: transparent;
}
}Exercício!
gisely.lucas@gmail..com

5. No GO!
_1-mixins.scss
Boas práticas
Não recomendado
$black: #000000;
Recomendado
$brand-primary: #e61d2b;
Variáveis
Exemplo:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Exercício!
gisely.lucas@gmail..com

6. Exemplo:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
Mixins
● Permite a criação de grupos de
declarações CSS que podem ser
reutilizados em outras partes do
arquivo.
● É possível ainda passar valores
para os mixins
Exercício!
@mixin
Permite a criação de um mixin
@include
Utiliza um mixin já criado
gisely.lucas@gmail..com

7. Operadores: +, -, /, * e %
Operações numéricas
Operações de cores
Operações booleanas
Dentre outras
Boas práticas
Recomendado
Deve-se utilizar valores no mesmo
formato/unidade.
Operações
Exemplo:
.class-x {
float: right;
width: 300px / 960px * 100%;
}
p {
color: #010203 * 2;
}
Exercício!
Os operadores relacionais (<,>, <=,> =)
também são suportados para números e
os operadores de igualdade (==,! =) são
suportados para todos os tipos.
gisely.lucas@gmail..com

8. 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

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

10. 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: _body.scss
.main {
@import “example”;
}
CSS
Arquivo compilável
.main .example {
color: #333;
}
Exercício!
gisely.lucas@gmail..com