• Save
LESS CSS (Pré compiladores) - Introdução
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,538 views

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.

Statistics

Views

Total Views
1,538
Views on SlideShare
1,538
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

LESS CSS (Pré compiladores) - Introdução Presentation 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