Post on 31-Jul-2015
Sou Beto MunizTenho 21 anos e sou um mineiro-capixaba.
Trabalho na Onrizon Social Games como Front-end Engineer
CONTATO@BETOMUNIZ.COM
WWW.BETOMUNIZ.COM
GITHUB.COM/OBETOMUNIZ
FB.COM/OBETOMUNIZ
OK!Vamos começar...
SASS & COMPASSO CSS Ninja Workflow
O que é SASS?
?sass-lang.com
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
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
Boas práticas e agilidade na escrita CSS
sass-lang.com
Herança
sass-lang.com
Variavéis, nesting, functions, if’s…else, for, etc.
sass-lang.com
E o Compass?…onde entra nisso?
!compass-style.org
compass-style.org
Compass é uma biblioteca de funcionalidades
escrita em Ruby que agrega o desenvolvimento com SASS
através de mixins, functions, helpers…
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
Helpers
compass-style.org
Mixins
compass-style.org
Achei legal……mas terei que aprender Ruby?
??
NÃO
Para rodar SASS e Compass existem vários caminhos, e alguns deles são:
CLI
Aplicativos
Task Runners
IDEs
Etc.
$ 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:
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
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
E pra finalizar esse blá blá blá...Vou só falar um pouquinho do...
Legal... Mas e agora?
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
Referências
http://sass-lang.com/
http://compass-style.org/
https://github.com/nextmat/compass-960-plugin
http://koala-app.com/
http://compass-style.org/help/tutorials/configuration-reference/
http://www.slideshare.net/andersonagr/sass-compass-alta-produtividade-no-frontend
https://github.com/obetomuniz/talk-devincompanybh-setembro-2013
http://alistapart.com/article/why-sass
FIMObrigado pela presença de todos.