Construsite Brasil
Criação de sites
pré-processadores
css
Construsite Brasil
Criação de sites
O QUE SÃO PRÉ PROCESSADORES?
Segundo o desenvolvedor web, OFELQUIS, pré processadores ...
Construsite Brasil
Criação de sites
RESUMINDO,
PRÉ PROCESSADORES SÃO LINGUaGENS QUE, UMA VEZ
COMPILADAS, GERAM NOSSO BOM E...
Construsite Brasil
Criação de sites
PORQUE UTILIZAR PRÉ PROCESSADORES?
Construsite Brasil
Criação de sites
ALGUNS MOTIVOS BEM CONVINCENTES
- css é despadronizado
- css é desorganizado
- Folhas ...
Construsite Brasil
Criação de sites
PRINCIPAIS PRE PROCESSADORES
- LESS
- STYLUS
- SASS
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
VARIÁVEIS
Construsite Brasil
Criação de sites
mixins
Construsite Brasil
Criação de sites
ANINHAMENTO DE SELETORES
Construsite Brasil
Criação de sites
Funções e operações
Construsite Brasil
Criação de sites
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src=”less.js...
Construsite Brasil
Criação de sites
.CSS
.LESS
E PASSA A SER
NOSSA FOLHA DE ESTILO DEIXA DE TER A EXTENÇÃO
Construsite Brasil
Criação de sites
CASO SEU CÓDIGO CONTENHA ERROS:
Construsite Brasil
Criação de sites
ATENÇÃO!
POR SER COMPILADO, DURANTE O DESENVOLVIMENTO,
PELO JAVASCRIPT, PODEMOS ENFREN...
Construsite Brasil
Criação de sites
“FRAMEWORK“ DE MIXINS
LESS Elements
Construsite Brasil
Criação de sites
“FRAMEWORK“ DE MIXINS
LESS Elements
É UMA BIBLIOTECA DE MIXINS PRONTOS, BASTA
BAIXAR E...
Construsite Brasil
Criação de sites
“FRAMEWORK“ DE MIXINS
LESS Elements
EXEMPLO DE UTILIZAÇÃO
DO FRAMEWORK
GOSTARIAMOS DE ...
Construsite Brasil
Criação de sites
Criei um exemplo mostrando como o framework funciona. Este exemplo pode
ser implementa...
Construsite Brasil
Criação de sites
APÓS O DESENVOLVIMENTO, DEVEMOS COMPILAR
NOSSO ARQUIVO .LESS PARA .CSS.
Construsite Brasil
Criação de sites
COMPILADORES
Construsite Brasil
Criação de sites
CRUNCH
ALÉM DE COMPILADOR, EDITA E SUPORTA A SINTAXE,
PORÉM NÃO AUTO-COMPLETA.
Construsite Brasil
Criação de sites
SIMPLESS
Um ótimo compilador que roda no windows.
Construsite Brasil
Criação de sites
LESS.APP
Um ótimo compilador PARA MAC OS.
Construsite Brasil
Criação de sites
WinLESS
VERSÃO ONLINE E TAMBÉM APLICATIVO DESKTOP OFFLINE
Construsite Brasil
Criação de sites
less2css.org
EDITOR ONLINE
Construsite Brasil
Criação de sites
http://lesscss.org/
Leia a documentação sempre!
Construsite Brasil
Criação de sites
PORQUE UTILIZAR LESS INVÉS DE OUTROS
PRÉ PROCESSADORES?
- COMPILA 6X MAIS RÁPIDO,
- IM...
Construsite Brasil
Criação de sites
MAS ISSO NÃO FAZ ELE SEr MELHOR OU PIOR, TUDO DEPENDE
DE SUAS NECESSIDADES.
Saber supr...
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 sol...
Construsite Brasil
Criação de sites
COMGRANDES
PODERESVEMGRANDES
“With great power comes great responsibility”
Voltaire
Construsite Brasil
Criação de sites
Créditos
Construsite Brasil
Criação de sites
www.construsitebrasil.com
Marcos César
De...
Construsite Brasil
Criação de sites
Referêcias
Anotações de Zeno Rocha Front-in BH. Por Sergio Lopes, Desenvolvedor front-...
Próximos SlideShares
Carregando em…5
×

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

1.836 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

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

  1. 1. Construsite Brasil Criação de sites pré-processadores css
  2. 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. 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. 4. Construsite Brasil Criação de sites PORQUE UTILIZAR PRÉ PROCESSADORES?
  5. 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. 6. Construsite Brasil Criação de sites PRINCIPAIS PRE PROCESSADORES - LESS - STYLUS - SASS
  7. 7. Construsite Brasil Criação de sites
  8. 8. Construsite Brasil Criação de sites VARIÁVEIS
  9. 9. Construsite Brasil Criação de sites mixins
  10. 10. Construsite Brasil Criação de sites ANINHAMENTO DE SELETORES
  11. 11. Construsite Brasil Criação de sites Funções e operações
  12. 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. 13. Construsite Brasil Criação de sites .CSS .LESS E PASSA A SER NOSSA FOLHA DE ESTILO DEIXA DE TER A EXTENÇÃO
  14. 14. Construsite Brasil Criação de sites CASO SEU CÓDIGO CONTENHA ERROS:
  15. 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. 16. Construsite Brasil Criação de sites “FRAMEWORK“ DE MIXINS LESS Elements
  17. 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. 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. 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. 20. Construsite Brasil Criação de sites APÓS O DESENVOLVIMENTO, DEVEMOS COMPILAR NOSSO ARQUIVO .LESS PARA .CSS.
  21. 21. Construsite Brasil Criação de sites COMPILADORES
  22. 22. Construsite Brasil Criação de sites CRUNCH ALÉM DE COMPILADOR, EDITA E SUPORTA A SINTAXE, PORÉM NÃO AUTO-COMPLETA.
  23. 23. Construsite Brasil Criação de sites SIMPLESS Um ótimo compilador que roda no windows.
  24. 24. Construsite Brasil Criação de sites LESS.APP Um ótimo compilador PARA MAC OS.
  25. 25. Construsite Brasil Criação de sites WinLESS VERSÃO ONLINE E TAMBÉM APLICATIVO DESKTOP OFFLINE
  26. 26. Construsite Brasil Criação de sites less2css.org EDITOR ONLINE
  27. 27. Construsite Brasil Criação de sites http://lesscss.org/ Leia a documentação sempre!
  28. 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. 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. 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. 31. Construsite Brasil Criação de sites COMGRANDES PODERESVEMGRANDES “With great power comes great responsibility” Voltaire
  32. 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. 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

×