Issuu on Google+

pré-processadores

css

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.

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.

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 de estilo muito extensas - REPETITIVO { Muitos prefixos (-webkit, -moz, -o, border-radius) } -nada intuitivo

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


EM PRODUÇÃO ADICIONAMOS EM NOSSO HEAD:

<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src=”less.js” type=”text/javascript”></script> NÃO SE ESQUEÇA QUE NOSSO ARQUIVO .LESS DEVE VIR SEMPRE ANTES DO LESS.JS.

Construsite Brasil Criação de sites


NOSSA FOLHA DE ESTILO DEIXA DE TER A EXTENÇÃO .CSS E PASSA A SER

.LESS

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 ENFRENTAR MUITOS PROBLEMAS COM CACHE DO NOVEGADOR.

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 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”;

Construsite Brasil Criação de sites


“FRAMEWORK“ DE MIXINS

LESS Elements EXEMPLO DE UTILIZAÇÃO DO FRAMEWORK

DEPOIS DE COMPILAR seletor {

-webkit-border-top-right-radius: 5px;

GOSTARIAMOS DE ADICIONAR BORDER-RADIUS EM UM ELEMENTO:

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

seletor { .border-radius(5px, 0, 0, 5px); }

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

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


Leia a documentação sempre!

http://lesscss.org/

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

Construsite Brasil Criação de sites


MAS ISSO Nテグ FAZ ELE SEr MELHOR OU PIOR, TUDO DEPENDE DE SUAS NECESSIDADES. Saber suprir as necessidades corretamente テゥ aumentar a produtividade e facilitar o desenvolvimento.

Construsite Brasil Criaテァテ」o de sites


“Se você não sabe CSS direito, esqueça tudo o que eu falei e use filtro solar!” Zeno rocha

Construsite Brasil Criação de sites


“With great power comes great responsibility” Voltaire

Construsite Brasil Criação de sites

COM GRANDES PODERES VEM GRANDES


Créditos

Material elaborado por:

Marcos César Desenvolvedor front-end e Designer

Construsite Brasil Criação de sites

www.construsitebrasil.com

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

Construsite Brasil Criação de sites


LESS e Pré Compiladores CSS