SlideShare a Scribd company logo
1 of 51
Download to read offline
SASS + COMPASS - Alta Produtividade no Front-end
Sobre mim

   Anderson Aguiar, 23
   @andersonaguiar

   Trabalho na
Os 3 mais populares
http://sass-lang.com/
SASS + COMPASS - Alta Produtividade no Front-end
Features

•   Variables
•   Nesting
•   Mixins
•   Selector Inheritance
•   Compression
•   Clean code
•   Silent comments
•   Colors(darken, lighten, saturate, grayscale)
•   Mathematical Expressions
•   Imports
Features
Variables
Features
Mathematical Expressions
Features
Mathematical Expressions
Features
Colors
Features
Nesting
Features
Mixins
Features
Mixins
Features
Selector Inheritance
Features
Compression + Silent comments
Features
Imports
Syntax


         S   SASS
Instalação
Instalação




             Instalar o ruby:
             http://rubyinstaller.org/downloads/
Instalação




             http://tinyurl.com/9nxw79l
Instalação
Instalação
Instalação




             gem install sass
                    ;)
Utilização




 sass --watch arquivo.scss:arquivo.css
 sass --watch sass:css --style compact
Utilização




    Mas eu não gosto do terminal
http://mhs.github.com/scout-app/
http://mhs.github.com/scout-app/
Perguntas sobre SASS?
http://compass-style.org/
SASS + COMPASS - Alta Produtividade no Front-end
Frameworks
Features

•   Frameworks
•   Comunidade forte
•   Já vem com SASS por default
•   CSS3
•   Sprites
•   Images
•   Estatísticas dos SCSS/CSS
•   Validação de CSS
•   ...
Instalação + Utilização




 1) Entrar no diretório do projeto
 2) Digitar no terminal: compass create
 3) Editar o config.rb que foi gerado, para as suas preferências
 4) Digitar no terminal: compass watch
 5) Começar a mágica ;)
Configuração
Features
CSS3

• Não precisa preencher vendors, o compass faz isso pra
  você
• Incompatibilidade de sintaxe
• Clearfix
• Box
• Box-shadow
• Border radius
• Text shadow
• Gradient
• Etc...
Features
CSS3
Features
CSS3
Features
Media queries
Features
Sprites
Features
Images
Features
Images
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
Features
Grids
Features
Grids – Instalação e uso




https://github.com/nextmat/compass-960-plugin
Features
Stats
Pré-processadores de CSS




Less: http://lesscss.org/
Stylus: http://learnboost.github.com/stylus/
Sass: http://sass-lang.com/
Devo usar?

• Já domino o CSS tradicional?

• Irá agregar melhoria no meu
  desenvolvimento?
Dúvidas?
Referências
http://www.tidbits.com.br/desenvolvendo-css-de-forma-mais-produtiva-usando-sass
(imagem de instalação windows, fluxo variáveis de ambiente)

http://www.slideshare.net/chriseppstein/authoring-stylesheets-with-compass-sass

http://www.slideshare.net/hlb/sass-compass-7653212

http://www.slideshare.net/adantz/frontendentwicklung-mit-sass-compass

http://www.slideshare.net/verekia/deep-dive-into-css-preprocessors

http://compass-style.org/

http://sass-lang.com/
Obrigado!


                                  Disponível em:
            http://www.slideshare.net/andersonagr



                                       Contato:
                                @andersonaguiar
                     andersonaguiarrr@gmail.com

More Related Content

What's hot

Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio FrameworkHiarison Gigante
 
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...Sergio Costa
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...Sergio Costa
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015Anyssa Ferreira
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerDiego Eis
 
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna [FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna Bunee.io - Hiring with Intelligence
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Sérgio Vilar
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp RioFellyph Cintra
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSSDiego Eis
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerguest5106e1
 
Clean code: programando com WordPress de forma profissional
Clean code: programando com WordPress de forma profissionalClean code: programando com WordPress de forma profissional
Clean code: programando com WordPress de forma profissionalLeo Baiano
 
Criando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-endCriando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-end@cristianoweb
 

What's hot (18)

Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
 
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
 
Sass - css bomba[do]
Sass - css bomba[do]Sass - css bomba[do]
Sass - css bomba[do]
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
 
Dream 05
Dream 05Dream 05
Dream 05
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna [FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Não subestime seu css
Não subestime seu cssNão subestime seu css
Não subestime seu css
 
Desempenho web
Desempenho webDesempenho web
Desempenho web
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp Rio
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 
Clean code: programando com WordPress de forma profissional
Clean code: programando com WordPress de forma profissionalClean code: programando com WordPress de forma profissional
Clean code: programando com WordPress de forma profissional
 
Criando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-endCriando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-end
 

Viewers also liked

Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.Edmo Jeova
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso
 
Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoRodrigo Nogueira
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performanceAnderson Solano
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end DevelopmentEdy Segura
 
GraphQL - APIs mais robustas e flexíveis
GraphQL - APIs mais robustas e flexíveisGraphQL - APIs mais robustas e flexíveis
GraphQL - APIs mais robustas e flexíveisBruno Lemos
 
Front End Development in Magento
Front End Development in MagentoFront End Development in Magento
Front End Development in MagentoEric Landmann
 
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-endOs mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-endZeno Rocha
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSEvoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSRodrigo Branas
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideSergio Azevedo
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroEduardo Shiota Yasuda
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSRodrigo Branas
 

Viewers also liked (20)

Sass conferencia css-sp
Sass conferencia css-spSass conferencia css-sp
Sass conferencia css-sp
 
Cake Php
Cake PhpCake Php
Cake Php
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Usabilidade na web
Usabilidade na webUsabilidade na web
Usabilidade na web
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
 
Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundo
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end Development
 
GraphQL - APIs mais robustas e flexíveis
GraphQL - APIs mais robustas e flexíveisGraphQL - APIs mais robustas e flexíveis
GraphQL - APIs mais robustas e flexíveis
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)
 
Front End Development in Magento
Front End Development in MagentoFront End Development in Magento
Front End Development in Magento
 
SEO para Front-End
SEO para Front-EndSEO para Front-End
SEO para Front-End
 
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-endOs mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-end
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSEvoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJS
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-Side
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 

Similar to SASS + COMPASS - Alta Produtividade no Front-end

Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassDanilo Sousa
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webCarlos Eduardo Kadu
 
CSS´s Dinâmicos - InfoTech 2012
CSS´s Dinâmicos - InfoTech 2012CSS´s Dinâmicos - InfoTech 2012
CSS´s Dinâmicos - InfoTech 2012André Paulovich
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012André Paulovich
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com SassVitor Garcia
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-endertdc-globalcode
 
CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seJulio Vedovatto
 
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de EstiloTécnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de EstiloElsaValada
 
Internet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesInternet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesGabriel Fernandes
 
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosCaio Gomes
 
Webstandards - Melhores práticas para construção de páginas web
Webstandards - Melhores práticas para construção de páginas webWebstandards - Melhores práticas para construção de páginas web
Webstandards - Melhores práticas para construção de páginas webCleo Morgause
 
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com MixinsLoiane Groner
 

Similar to SASS + COMPASS - Alta Produtividade no Front-end (20)

Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compass
 
Sass - Syntactically Awesome Style Sheets
Sass - Syntactically Awesome Style SheetsSass - Syntactically Awesome Style Sheets
Sass - Syntactically Awesome Style Sheets
 
[Sass] Aula 01
[Sass] Aula 01[Sass] Aula 01
[Sass] Aula 01
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
CSS 3
CSS 3CSS 3
CSS 3
 
CSS´s Dinâmicos - InfoTech 2012
CSS´s Dinâmicos - InfoTech 2012CSS´s Dinâmicos - InfoTech 2012
CSS´s Dinâmicos - InfoTech 2012
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
 
CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-se
 
Ruby on Rails for beginners 2.0
Ruby on Rails for beginners 2.0Ruby on Rails for beginners 2.0
Ruby on Rails for beginners 2.0
 
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de EstiloTécnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
 
Internet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesInternet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websites
 
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Webstandards - Melhores práticas para construção de páginas web
Webstandards - Melhores práticas para construção de páginas webWebstandards - Melhores práticas para construção de páginas web
Webstandards - Melhores práticas para construção de páginas web
 
Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5
 
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
 

SASS + COMPASS - Alta Produtividade no Front-end