Your SlideShare is downloading. ×
LESS CSS (Pré compiladores) - Introdução
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

LESS CSS (Pré compiladores) - Introdução

1,236
views

Published on

Noções básicas de pré compiladores CSS. LESSCSS. http://lesscss.org/ …

Noções básicas de pré compiladores CSS. LESSCSS. http://lesscss.org/

Material de estudos elaborado por Marcos César // www.marcoscesar.com

Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.

cc 2012 Construsite Brasil - Desenvolvimento web.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,236
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Construsite Brasil Criação de sites pré-processadores css
  • 2. Construsite Brasil Criação de sites O QUE SÃO PRÉ PROCESSADORES? Segundo o desenvolvedor web, OFELQUIS, pré processadores são programas que efetuam conversões léxicas, ou seja, converte uma linguagem simplificada (por exemplo gírias no português) em linguagem formal. POR EXEMPLO, MACROS DE SUBSTITUIÇÃO: A = ÁRVORE SEMPRE QUE EU UTILIZAR ‘A‘, ESTAREI, NA VERDADE DIZENDO ÁRVORE.
  • 3. Construsite Brasil Criação de sites RESUMINDO, PRÉ PROCESSADORES SÃO LINGUaGENS QUE, UMA VEZ COMPILADAS, GERAM NOSSO BOM E VELHO CSS, ADICIONANDO RECURSOS PARA AUXILIAR NA CODIFICAÇÃO.
  • 4. Construsite Brasil Criação de sites PORQUE UTILIZAR PRÉ PROCESSADORES?
  • 5. Construsite Brasil Criação de sites ALGUNS MOTIVOS BEM CONVINCENTES - css é despadronizado - css é desorganizado - Folhas de estilo muito extensas - REPETITIVO { Muitos prefixos (-webkit, -moz, -o, border-radius) } -nada intuitivo
  • 6. Construsite Brasil Criação de sites PRINCIPAIS PRE PROCESSADORES - LESS - STYLUS - SASS
  • 7. Construsite Brasil Criação de sites
  • 8. Construsite Brasil Criação de sites VARIÁVEIS
  • 9. Construsite Brasil Criação de sites mixins
  • 10. Construsite Brasil Criação de sites ANINHAMENTO DE SELETORES
  • 11. Construsite Brasil Criação de sites Funções e operações
  • 12. Construsite Brasil Criação de sites <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src=”less.js” type=”text/javascript”></script> EM PRODUÇÃO ADICIONAMOS EM NOSSO HEAD: NÃO SE ESQUEÇA QUE NOSSO ARQUIVO .LESS DEVE VIR SEMPRE ANTES DO LESS.JS.
  • 13. Construsite Brasil Criação de sites .CSS .LESS E PASSA A SER NOSSA FOLHA DE ESTILO DEIXA DE TER A EXTENÇÃO
  • 14. Construsite Brasil Criação de sites CASO SEU CÓDIGO CONTENHA ERROS:
  • 15. Construsite Brasil Criação de sites ATENÇÃO! POR SER COMPILADO, DURANTE O DESENVOLVIMENTO, PELO JAVASCRIPT, PODEMOS ENFRENTAR MUITOS PROBLEMAS COM CACHE DO NOVEGADOR.
  • 16. Construsite Brasil Criação de sites “FRAMEWORK“ DE MIXINS LESS Elements
  • 17. Construsite Brasil Criação de sites “FRAMEWORK“ DE MIXINS LESS Elements É UMA BIBLIOTECA DE MIXINS PRONTOS, BASTA BAIXAR E IMPORTAR PARA O SEU ARQUIVO .LESS O arquivo pode ser baixado em http://lesselements.com/ Depois de baixado e estar no mesmo diretório que o nosso style.less basta adicionarmos @import “elements.less”;
  • 18. Construsite Brasil Criação de sites “FRAMEWORK“ DE MIXINS LESS Elements EXEMPLO DE UTILIZAÇÃO DO FRAMEWORK GOSTARIAMOS DE ADICIONAR BORDER-RADIUS EM UM ELEMENTO: seletor { .border-radius(5px, 0, 0, 5px); } seletor { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 5px; -moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box; } DEPOIS DE COMPILAR
  • 19. Construsite Brasil Criação de sites Criei um exemplo mostrando como o framework funciona. Este exemplo pode ser implementado no framework, já que não existe.
  • 20. Construsite Brasil Criação de sites APÓS O DESENVOLVIMENTO, DEVEMOS COMPILAR NOSSO ARQUIVO .LESS PARA .CSS.
  • 21. Construsite Brasil Criação de sites COMPILADORES
  • 22. Construsite Brasil Criação de sites CRUNCH ALÉM DE COMPILADOR, EDITA E SUPORTA A SINTAXE, PORÉM NÃO AUTO-COMPLETA.
  • 23. Construsite Brasil Criação de sites SIMPLESS Um ótimo compilador que roda no windows.
  • 24. Construsite Brasil Criação de sites LESS.APP Um ótimo compilador PARA MAC OS.
  • 25. Construsite Brasil Criação de sites WinLESS VERSÃO ONLINE E TAMBÉM APLICATIVO DESKTOP OFFLINE
  • 26. Construsite Brasil Criação de sites less2css.org EDITOR ONLINE
  • 27. Construsite Brasil Criação de sites http://lesscss.org/ Leia a documentação sempre!
  • 28. Construsite Brasil Criação de sites PORQUE UTILIZAR LESS INVÉS DE OUTROS PRÉ PROCESSADORES? - COMPILA 6X MAIS RÁPIDO, - IMPLEMENTADO EM JAVASCRIPT - MAIS SIMPLES E ORGANIZADO
  • 29. Construsite Brasil Criação de sites MAS ISSO NÃO FAZ ELE SEr MELHOR OU PIOR, TUDO DEPENDE DE SUAS NECESSIDADES. Saber suprir as necessidades corretamente é aumentar a produtividade e facilitar o desenvolvimento.
  • 30. Construsite Brasil Criação de sites Zeno rocha “Se você não sabe CSS direito, esqueça tudo o que eu falei e use filtro solar!”
  • 31. Construsite Brasil Criação de sites COMGRANDES PODERESVEMGRANDES “With great power comes great responsibility” Voltaire
  • 32. Construsite Brasil Criação de sites Créditos Construsite Brasil Criação de sites www.construsitebrasil.com Marcos César Desenvolvedor front-end e Designer Material elaborado por:
  • 33. Construsite Brasil Criação de sites Referêcias Anotações de Zeno Rocha Front-in BH. Por Sergio Lopes, Desenvolvedor front-end, Palestrante e instrutor na Caelum. [acesso em 22 de janeiro de 2013]. Disponível em http://sergiolopes.org/front-in-bh-css-sucks-zeno-rocha/ CSS Sucks. Zeno Rocha. [acesso em 22 de janeiro de 2013]. Disponível em http://www.slideshare.net/imasters/css-sucks Zeno Rocha | HTML5, CSS3 e JavaScript. Disponível em: http://zenorocha.com/ PRÉ-PROCESSADORES DE CSS . Por OFELQUIS. [acesso em 22 de janeiro de 2013]. Disponível em http://tutsmais.com.br/talks/pre-processadores/ lesscss.org by Alexis Sellier. Disponível em http://lesscss.org