Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS´s Dinâmicos - InfoTech 2012

593 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.

  • Ahh, agora entendi! O SASS no caso gera o CSS, correto? Eu pensava que era uma nova extensão.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Olá Ivomar, após instalar o Ruby... você vai precisar usar o comando 'sass --watch seuarquivo.sass:nomedoarquivoquevaigerar.css'. Rode este comando no prompt do windows e deixe-o aberto. Fazendo isso, sempre que você modificar o arquivo SASS ele vai recompilar e gerar um novo CSS para você.

    http://www.100loop.com/destaque/como-usar-sass-syntactically-awesome-stylesheets-no-windows/

    Leia este artigo para compreender melhor.
    um abraço,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Após a instalação. Qual o procedimento a fazer para o CSS ler o SASS?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

CSS´s Dinâmicos - InfoTech 2012

  1. 1. CSS´S DINÂMICOSAndré Paulovich | João Paulo
  2. 2. André Paulovich@andrepaulovichpaulovich@100loop.comwww.100loop.comwww.raptors.com.br
  3. 3. João Paulo@joaopsferreirajoao@100loop.comwww.100loop.comwww.joaopferreira.com
  4. 4. 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
  5. 5. 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”/>
  6. 6. 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 {}
  7. 7. Dois principais tópicos sobre CSS Seletores .info { Propriedades background: #f3b500; text-align: center; border: solid 1px #f3b500; }
  8. 8. Regras de escrita Lista-de-Seletores { Lista-de-Propriedades } Seletores .header , .title { color: #f3b500; font-size: 10px; Background: #FF0033; }
  9. 9. E O CSS3?
  10. 10. Exemplos de CSS3Text shadowBox shadowFont faceMulti columnTransitions
  11. 11. NavegadoresPrefixos experimentais-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, Android
  12. 12. Media QueriesPrefixos por browsers
  13. 13. Media QueriesPrefixos por browsers
  14. 14. SASS -SYNTACTICALLYAWESOME STYLESHEETS
  15. 15. Quem programa em Ruby?
  16. 16. gem install sass Quem programa em Ruby? Para nossa alegria... Precisamos apenas instalá-lo. http://rubyinstaller.org
  17. 17. gem install sass Quem programa em Ruby?
  18. 18. gem install sass Passo final de instalação gem install sass
  19. 19. É uma extensão do CSS3Traz de volta a diversão de escrever CSS.Acrescentando mais poder ao CSS. Regras Variáveis aninhadas CSS Herança de Combinações seletores
  20. 20. Variáveis Resultado
  21. 21. DEMO
  22. 22. “Aninhamento” Resultado
  23. 23. DEMO
  24. 24. Combinações Resultado
  25. 25. DEMO
  26. 26. Herança de seletores Resultado
  27. 27. DEMO
  28. 28. Funções extraslightenbackground-color: lighten($navbar-color, 20%);}darkenbackground-color: darken($navbar-color, 20%);}
  29. 29. PERGUNTAS?

×