O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes Altere suas preferências de anúncios quando desejar.
CSS´s Dinâmicos com SSAS   Modernizando a forma como escrevemos as folhas                           de estilo para website...
André Paulovichpaulovich@100loop.com@andrepaulovich               www.raptors.com.br   www.100loop.com
Era uma vez...• A internet surgiu com objetivo de compartilhar textos  científicos .• Quando o HTML foi criado, a intenção...
Era uma vez...                 12/27/2012
Era uma vez...                 12/27/2012
Era uma vez...                 12/27/2012
Era uma vez...                 Foi aí que ele propôs a criação do CSS ou Cascading                 Style Sheets…          ...
Era uma vez...Cascading HTML Style Sheets (proposta / CERN) - 1994CSS 1 - 1996CSS 2 - 1998CSS 2.1 (revisão) - 2003 <<CSS 3...
O que é CSS?• Permite separar a formatação visual do conteúdo• Podemos especificar a formatação para:   –   Todos os eleme...
Três formas de especificar o CSS1) HTML Inline style  <div style=“color: red; font-size: 18px”>Texto</div>2) Style dentro ...
SeletoresNome do elemento       div, p, td, table {}Definição por Id       #logo, #special {}Nome de classes       .header...
Dois principais tópicos sobre CSS   Seletores       .info {            Propriedades          background: #f3b500;         ...
Regras de escrita       Lista-de-Seletores {          Lista-de-Propriedades       } Seletores       .header , .title {    ...
Mas e o   CSS3?
=
Exemplos de CSS3Text shadowBox shadowFont faceMulti columnTransitions
Demo
NavegadoresPrefixos experimentais-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, An...
Media Queries
Media Queries
Sass -Syntactically Awesome         Stylesheets
Quem programa em Ruby?
Para nossa alegria...Precisamos apenas instalá-lo.http://rubyinstaller.org
gem install sass     Passo final de instalação
Traz de volta a diversão de escrever CSS.Acrescentando mais poder ao CSS.     É uma extensão do CSS3      Regras          ...
Variáveis            Resultado
demo
“Aninhamento”                Resultado
demo
Combinações              Resultado
demo
Herança de seletores              Resultado
demo
Funções extraslightenbackground-color: lighten($navbar-color, 20%);}darkenbackground-color: darken($navbar-color, 20%);}
Perguntas?
Obrigado!            12/05/12
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
Próximos SlideShares
Carregando em…5
×

CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012

2.381 visualizações

Publicada em

Nesta palestra, vamos abordar um tema muito comum e de fácil aprendizagem. Todo desenvolvedor que trabalhe com internet hoje em dia, precisa aprender a tornar a linguagem de marcação CSS (Cascading Style Sheets) utilizada para definir a apresentação dos documentos HTML em uma linguagem completamente nova e poderosa, capaz de oferecer grande produtividade. Vamos explorar diferentes frameworks como SASS e LESS e suas vantagens e desvantagens.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012

  1. 1. CSS´s Dinâmicos com SSAS Modernizando a forma como escrevemos as folhas de estilo para websites André Paulovich
  2. 2. André Paulovichpaulovich@100loop.com@andrepaulovich www.raptors.com.br www.100loop.com
  3. 3. Era uma vez...• A internet surgiu com objetivo de compartilhar textos científicos .• Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação. 12/27/2012
  4. 4. Era uma vez... 12/27/2012
  5. 5. Era uma vez... 12/27/2012
  6. 6. Era uma vez... 12/27/2012
  7. 7. Era uma vez... Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets… Isso lá em 1994. Convidou, Bert Bos – que naquele tempo estava trabalhando em um browser chamado Argo – começou a trabalhar no projeto. Os dois então, trabalharam juntamente no começo do desenvolvimento do CSS.Håkon Wium Lie 12/27/2012
  8. 8. Era uma vez...Cascading HTML Style Sheets (proposta / CERN) - 1994CSS 1 - 1996CSS 2 - 1998CSS 2.1 (revisão) - 2003 <<CSS 3 - em desenvolvimentoSó a partir de 2001 começam a ser realmente usadas devido à falta desuporte por parte dos browsers mais antigos. 12/27/2012
  9. 9. O que é CSS?• Permite separar a formatação visual do conteúdo• Podemos especificar a formatação para: – Todos os elementos de um determinado tipo – Para um elemento com um determinado id – Todos os elementos com uma determinada classe – E combinações destas três formas acima
  10. 10. Três formas de especificar o CSS1) HTML Inline style <div style=“color: red; font-size: 18px”>Texto</div>2) Style dentro do Head <style type=“text/css”>Configurações de CSS</style>3) Usando a tag link <link rel=“stylesheet” type=“text/css” href=“arquivo.css”/>
  11. 11. SeletoresNome do elemento div, p, td, table {}Definição por Id #logo, #special {}Nome de classes .header, .title {}Combinação dos 3 tipos table #logo .special {}
  12. 12. Dois principais tópicos sobre CSS Seletores .info { Propriedades background: #f3b500; text-align: center; border: solid 1px #f3b500; }
  13. 13. Regras de escrita Lista-de-Seletores { Lista-de-Propriedades } Seletores .header , .title { color: #f3b500; font-size: 10px; Background: #FF0033; }
  14. 14. Mas e o CSS3?
  15. 15. =
  16. 16. Exemplos de CSS3Text shadowBox shadowFont faceMulti columnTransitions
  17. 17. Demo
  18. 18. NavegadoresPrefixos experimentais-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, Android
  19. 19. Media Queries
  20. 20. Media Queries
  21. 21. Sass -Syntactically Awesome Stylesheets
  22. 22. Quem programa em Ruby?
  23. 23. Para nossa alegria...Precisamos apenas instalá-lo.http://rubyinstaller.org
  24. 24. gem install sass Passo final de instalação
  25. 25. Traz de volta a diversão de escrever CSS.Acrescentando mais poder ao CSS. É uma extensão do CSS3 Regras Variáveis aninhadas CSS Herança de Combinações seletores
  26. 26. Variáveis Resultado
  27. 27. demo
  28. 28. “Aninhamento” Resultado
  29. 29. demo
  30. 30. Combinações Resultado
  31. 31. demo
  32. 32. Herança de seletores Resultado
  33. 33. demo
  34. 34. Funções extraslightenbackground-color: lighten($navbar-color, 20%);}darkenbackground-color: darken($navbar-color, 20%);}
  35. 35. Perguntas?
  36. 36. Obrigado! 12/05/12

×