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.352 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
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.352
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

    ×