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.
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.
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
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.
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.
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.
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