ApresentaçãoLESS

298 visualizações

Publicada em

Apresentação realizada durante a III Semana Acadêmica de Computação na UFPA.

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

ApresentaçãoLESS

  1. 1. Fernando Gama f.fabiogama88@gmail.com LESS The dynamic stylesheet language.
  2. 2. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  3. 3. A LINGUAGEM - Pré-processador que gera folha de estilo. - Código aberto. - Estender CSS. - Retrocompatível. - Fácil de aprender.
  4. 4. A LINGUAGEM Sintaxe Aprendizado Existente Manutenção Produção Copy/Past e
  5. 5. Ju Fonte:http://css-tricks.com/poll-results-popularity-of-css-prepro
  6. 6. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  7. 7. COMO COMEÇAR? Sublime Text 2 1. CRTL + SHIFT + P 2. Digite “Install” 3. Digite Less-Build Eclipse Plugin for Less: XText (+ info) http://bit.ly/1b1bQwj
  8. 8. COMO COMEÇAR? Cliente / Servidor It's easy!
  9. 9. COMO COMEÇAR? <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script>
  10. 10. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  11. 11. VARIÁVEIS Permite a utilização e o reuso de valores em um único local.
  12. 12. VARIÁVEIS // Compiled CSS // LESS @color: #4D926F; #header { #header { color: #4D926F; color: @color; } } h2 { h2 { color: #4D926F; } color: @color; }
  13. 13. VARIÁVEIS Outro Exemplo: Exemplo Em vez disso... a.brisa{ background-image: url("/site/padrao/theme1/imagens/brisa.jpg"); } a.mar:{ background-image: url("/site/padrao/theme1/imagens/mar.jpg"); }
  14. 14. VARIÁVEIS Que tal isso? @pathImagens: "/site/padrao/theme1/imagens/"; a { &.brisa { background-image: url("@{pathImagens} brisa.jpg"); brisa } &.mar { background-image: url("@{pathImagens}mar.jpg"); } }
  15. 15. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  16. 16. MIXINS Incorporar todas as propriedades de uma classe dentro de uma outra classe. Podem se comportar como função. função
  17. 17. MIXINS // Compiled CSS #header { // LESS .rounded-corners (@radius: 5px) { border-radius: 5px; border-radius: @radius; -webkit-border-radius: 5px; -webkit-border-radius: @radius; -moz-border-radius: 5px; -moz-border-radius: @radius; } } #footer { #header { border-radius: 10px; .rounded-corners; -webkit-border-radius: 10px; } -moz-border-radius: 10px; #footer { } .rounded-corners(10px); }
  18. 18. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  19. 19. REGRAS ANINHADAS Torna a herança mais clara e diminui o stylesheet.
  20. 20. REGRAS ANINHADAS // Compiled CSS // LESS #header h1 { font-size: 26px; #header { font-weight: bold; h1 { } font-size: 26px; #header p { font-weight: bold; font-size: 12px; } } p { font-size: 12px; #header p a { a { text-decoration: none; text-decoration: none; } &:hover { border-width: 1px } #header p a:hover { } border-width: 1px; } } }
  21. 21. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  22. 22. FUNÇÕES & OPERAÇÕES Funções permitem manipular valores. Operações permitem somar, subtrair, dividir, multiplicar propriedades e cores. cores
  23. 23. FUNÇÕES & OPERAÇÕES // Compiled CSS #header { color: #333; border-left: 1px; border-right: 2px; } // LESS @the-border: 1px; @base-color: #111; @red: #header { color: (@base-color * 3); #footer { border-left: @the-border; color: #114411; border-color: #7d2717; } #842210; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); }
  24. 24. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  25. 25. IMPORTAÇÃO Que tal modularizar os arquivos .less? less
  26. 26. IMPORTAÇÃO // importando os outros arquivos // topo.less @import "topo.less"; @colorFundo: #FFCC00; @import "conteudo.less"; #fundo { @import "rodape.less"; background-color:@colorFundo; } .css variávei s
  27. 27. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  28. 28. ESCOPO DE VARIÁVEIS Variáveis podem ser criadas em diferentes escopos. Os Escopos são delimitados por seletores de elementos ou mixins. mixins
  29. 29. ESCOPO DE VARIÁVEIS @var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red }
  30. 30. AGENDA A Linguagem Como começar Variáveis Mixins Regras Aninhadas Funções e Operações Importação de stylesheet Escopo de variáveis Referências
  31. 31. REFERÊNCIAS http://lesscss.org/ http://lesscss.loopinfinito.com.br/
  32. 32. REFERÊNCIAS LESS. The dynamic stylesheet language . < http://lesscss.org/ >. Acesso em 03/11/2013. LOPES, Sérgio. CSS fácil, flexível e dinâmico com Less . <http://blog.caelum.com.br/css-facil-flexivel-e-dinamicocom-less/>. Acesso em 03/11/2013. LOPES, Sérgio. Saiba o que é Less, e como ele pode agilizar seu trabalho . <http://tutsmais.com.br/blog/css/saiba-o-que-e-less-ecomo-ele-pode-agilizar-seu-trabalho/>. Acesso em 03/11/2013.

×