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
Upcoming SlideShare
Loading in …5
×

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

2,305 views
2,172 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,305
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Esta é outra opção para um slide de Visão Geral.
  • As duas primeiras não são encorajadas, pois aumentam a transferência de dados.Faça somente a terceira opçãoEles são processados na ordem que é mostrada.
  • 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

    ×