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 o que são pré-processadores, o que é o Sass, conceitos básicos para desenvolvimento em Sass.

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

2. ● 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
Agenda
gisely.lucas@gmail..com

3. ● Aplicações que processam arquivos para criar folhas de estilo
● Permitem o uso de alguns recursos da linguagem utilizada, como:
○ Variáveis;
○ Funções;
○ Cálculos matemáticos;
○ Sintaxe simples e intuitiva;
○ Dentre outras.
● Pré-processadores mais comuns: Sass, Stylus e Less
O que são pré-processadores?
Sass file CSS fileCompilador Sass
gisely.lucas@gmail..com

4. ● Syntactically Awesome Stylesheets
● Linguagem baseada no CSS
● Possui duas extensões: SCSS e SASS
● O processador do Sass é baseado em Ruby
Um pouco sobre a história do Sass ...
● Desenvolvido por Hamption Catlin
● Começou a ser desenvolvido em 2006
● Open Source
O que é o Sass?
gisely.lucas@gmail..com

5. E qual dos pré-processadores é o
melhor?
gisely.lucas@gmail..com

6. Por que usar Sass?
Sass Less Stylus
Base Ruby JavaScript NodeJS
Sintaxe x x
Variáveis x x x
Código Aninhado x x x
Herança x x
Mixins x x x
Importações x x x
Operações x x
Medias Queries x
http://www.wizache.com/blog/sass-vs-less-que-pre-procesador-de-css-es-mejor.html gisely.lucas@gmail..com

7. Less ou Sass para o GO!
● AEM
● ArmChair
● Custo
● Temas criados pelo author
POC
● KOAD-7062
Mas e no GO!
gisely.lucas@gmail..com

8. Desenvolvendo em Sass
gisely.lucas@gmail..com

9. 1. Instalar o Atom (https://atom.io/)
2. Instalar o node.js (https://nodejs.org/)
3. Instalar o node-sass (npm install node-sass -g)
4. Instalar o SASS AutoCompile para Atom
Para compilar: Ctrl + Shift + c
Preparação de ambiente
gisely.lucas@gmail..com

10. Modularização: permite agrupar estilos.
● _4-root.scss
● _11-divider.scss
● _section-media-wall.scss
Importação: permite ligar arquivos para
que o seu CSS seja dividido em partes
menores
Arquivo compilado:
● uikit.scss
Modularização e importação
Exemplo: file uikit.scss
@import “section-x”;
@import “section-y”;
...
_section-x.scss
_section-y.scss
uikit.css
uikit.scss
Exercício!
gisely.lucas@gmail..com

11. ● Permite CSS legíveis e uma fácil
manutenção.
Boas práticas
Cuidados!
Para não especificar demais o seu código
Recomendado
Ter de 3 a 4 níveis de aninhamento no
máximo.
Aninhamento
Exemplo:
Sass
.items {
margin: 0;
.item {
margin: 0 3% 3%;
}
}
Css
.items { margin: 0; }
.items .item { margin: 0 3% 3%; }
Exercício!
gisely.lucas@gmail..com