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.

1. CSS´S DINÂMICOS
André Paulovich | João Paulo

2. André Paulovich
@andrepaulovich
paulovich@100loop.com
www.100loop.com
www.raptors.com.br

3. João Paulo
@joaopsferreira
joao@100loop.com
www.100loop.com
www.joaopferreira.com

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. Três formas de especificar o CSS
1) 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. Seletores
Nome 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. Dois principais tópicos sobre CSS
Seletores
.info { Propriedades
background: #f3b500;
text-align: center;
border: solid 1px #f3b500;
}

8. Regras de escrita
Lista-de-Seletores {
Lista-de-Propriedades
}
Seletores
.header , .title {
color: #f3b500;
font-size: 10px;
Background: #FF0033;
}

9. E O CSS3?

10. Exemplos de CSS3
Text shadow
Box shadow
Font face
Multi column
Transitions

11. Navegadores
Prefixos experimentais
-ms- para IE
-moz- para Firefox
-o- para Ópera
-webkit- para Safari, Chrome, iPhone, iOS, Android

12. Media Queries
Prefixos por browsers

13. Media Queries
Prefixos por browsers

14. SASS -SYNTACTICALLY
AWESOME STYLESHEETS

15. Quem programa em Ruby?

16. gem install sass
Quem programa em Ruby?
Para nossa alegria...
Precisamos apenas instalá-lo.
http://rubyinstaller.org

17. gem install sass
Quem programa em Ruby?

18. gem install sass
Passo final de instalação
gem install sass

19. É uma extensão do CSS3
Traz 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. Variáveis
Resultado

21. DEMO

22. “Aninhamento”
Resultado

23. DEMO

24. Combinações
Resultado

25. DEMO

26. Herança de seletores
Resultado

27. DEMO

28. Funções extras
lighten
background-color: lighten($navbar-color, 20%);}
darken
background-color: darken($navbar-color, 20%);}

29. PERGUNTAS?