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.

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