SASS é um pré-processador escrito em Ruby
que permite “estender” o CSS nativo e com
isso inserir mais produtividade
no desenvolvimento Front End do dia a dia.
sass-lang.com
Slide 8
Slide 8 text
Features do SASS
Variáveis, If”s…else, for”s, Collections, etc.
Aninhamento de Seletores
Herança de de Seletores
Variadas CSS Outputs
Organização e Lint
Funções para controle de Cores
Operadores Math
@import inteligente
Slide 9
Slide 9 text
Boas práticas e agilidade na escrita CSS
sass-lang.com
Slide 10
Slide 10 text
Herança
sass-lang.com
Slide 11
Slide 11 text
Variavéis, nesting, functions, if’s…else, for, etc.
sass-lang.com
Slide 12
Slide 12 text
E o Compass?
…onde entra nisso?
compass-style.org
Slide 13
Slide 13 text
compass-style.org
Compass é uma biblioteca de funcionalidades
escrita em Ruby que agrega o desenvolvimento com SASS
através de mixins, functions, helpers…
Slide 14
Slide 14 text
Features do Compass
Módulos para CSS3
Helpers
Módulos para Layout
Módulo de Reset
Módulo de Tipografia
Gerador de CSS Sprite
Plugins* Dedicados
Slide 15
Slide 15 text
Helpers
compass-style.org
Slide 16
Slide 16 text
Mixins
compass-style.org
Slide 17
Slide 17 text
Achei legal…
…mas terei que aprender Ruby?
?
Slide 18
Slide 18 text
NÃO
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Para rodar SASS e Compass existem
vários caminhos, e alguns deles são:
CLI
Aplicativos
Task Runners
IDEs
Etc.
Slide 21
Slide 21 text
$
compass
watch
http://sass-lang.com/documentation/
http://compass-style.org/reference/compass/
e para mais informações
acesse:
$
sudo
gem
install
sass
&&
sudo
gem
install
compass
Via command line
com
Ruby
instalado
no
seu
Sistema
Operacional
digite
na
sua
aplicação
de
terminal
o
comando:
crie
dois
arquivos
chamados
project/sass/arquivo.scss
e
um
arquivo
project/config.rb*
e
dentro
do
diretorio
project,
digite
o
seguinte
comando
no
terminal:
Slide 22
Slide 22 text
A lista de Aplicativos mais conhecidos capazes de compilar SASS e
Compass são:
Linux, Win e MacOS - free
Via Apps
MacOS - pago
MacOS - pago
Win e MacOS - free
MacOS - pago
Slide 23
Slide 23 text
Koala-app
koala-app.com
Slide 24
Slide 24 text
via Grunt
com
SASS
e
Compass
já
instalados
no
seu
computador,
digite
na
sua
aplicação
de
terminal
o
comando:
e
por
ultimo
crie
a
tarefa
em
seu
Gruntfile.js
de
acordo
com
a
documentação
do
grunt-‐contrib-‐compass
e
para
mais
informações
acesse:
$
npm
install
grunt-‐contrib-‐compass
-‐-‐save-‐dev
https://github.com/gruntjs/grunt-contrib-compass
Slide 25
Slide 25 text
E pra finalizar esse blá blá blá...
Vou só falar um pouquinho do...
Slide 26
Slide 26 text
config.rb
goo.gl/nsv2YQ
Slide 27
Slide 27 text
Legal... Mas e agora?
Slide 28
Slide 28 text
Show me the Code!
O
que
faremos?
BRINCAR
um
pouco
com
SASS
e
Compass.
…para
isso
façam
o
download
do
Koala-‐app
aqui:
goo.gl/NC47ny
e
também
das
estruturas
aqui:
goo.gl/Yxbp8U