LESSLESSThe dynamic stylesheet language.

Fernando Gama

f.fabiogama88@gmail.com

AGENDA

A Linguagem

Como começar

Variáveis

Mixins

Regras Aninhadas

Funções e Operações

Importação de stylesheet

Escopo de variáveis

Referências

A LINGUAGEM

- Pré-processador que gera folha de estilo.

- Código aberto.

- Estender CSS.

- Retrocompatível.

- Fácil de aprender.

A LINGUAGEM

Manutenção

Copy/Paste

Produção

AprendizadoSintaxe

Existente

June 11, 12Fonte:http://css-tricks.com/poll-results-popularity-of-css-preprocessors/

AGENDA

A Linguagem

Como começarComo começar

Variáveis

Mixins

Regras Aninhadas

Funções e Operações

Importação de stylesheet

Escopo de variáveis

Referências

COMO COMEÇAR?

Sublime Text 2Sublime Text 2

1. CRTL + SHIFT + P

2. Digite “Install”

3. Digite Less-Build

EclipseEclipsePlugin for Less: XText

(+ info) http://bit.ly/1b1bQwj

COMO COMEÇAR?

Cliente / Servidor

It's easy!

COMO COMEÇAR?

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="less.js" type="text/javascript"></script>

AGENDA

A Linguagem

Como começar

Variáveis Variáveis

Mixins

Regras Aninhadas

Funções e Operações

Importação de stylesheet

Escopo de variáveis

Referências

VARIÁVEIS

Permite a utilizaçãoutilização e o

reusoreuso de valores em um

únicoúnico local.

VARIÁVEIS

// LESS

@color: #4D926F;

#header {

color: @color;

}

h2 {

color: @color;

}

// Compiled CSS

#header {

color: #4D926F;

}

h2 {

color: #4D926F;

}

VARIÁVEIS

Outro ExemploExemplo:

Em vez disso...Em vez disso...

a.brisa{

background-image: url("/site/padrao/theme1/imagens/brisa.jpg");

}

a.mar:{

background-image: url("/site/padrao/theme1/imagens/mar.jpg");

}

VARIÁVEIS

Que tal isso?Que tal isso?

@pathImagens: "/site/padrao/theme1/imagens/";

a {

&.brisa {

background-image: url("@{pathImagens}@{pathImagens}brisabrisa.jpg");

}

&.mar {

background-image: url("@{pathImagens}mar.jpg");

}

}

AGENDA

A Linguagem

Como começar

Variáveis

MixinsMixins

Regras Aninhadas

Funções e Operações

Importação de stylesheet

Escopo de variáveis

Referências

MIXINS

Incorporar todas as

propriedades de uma classe

dentro de uma outra classe.

Podem se comportar como

funçãofunção.

MIXINS

// LESS

.rounded-corners (@radius: 5px) {

border-radius: @radius;

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

}

#header {

.rounded-corners;

}

#footer {

.rounded-corners(10px);

}

// Compiled CSS

#header {

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

}

#footer {

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

AGENDA

A Linguagem

Como começar

Variáveis

Mixins

Regras AninhadasRegras Aninhadas

Funções e Operações

Importação de stylesheet

Escopo de variáveis

Referências

REGRAS ANINHADAS

Torna a herança mais claramais clara

e diminuidiminui o stylesheet.

// LESS

#header {

h1 {

font-size: 26px;

font-weight: bold;

}

p { font-size: 12px;

a { text-decoration: none;

&:hover { border-width: 1px }

}

}

}

// Compiled CSS

#header h1 {

font-size: 26px;

font-weight: bold;

}

#header p {

font-size: 12px;

}

#header p a {

text-decoration: none;

}

#header p a:hover {

border-width: 1px;

}

REGRAS ANINHADAS

AGENDA

A Linguagem

Como começar

Variáveis

Mixins

Regras Aninhadas

Funções e Operações

Importação de stylesheet

Escopo de variáveis

Referências

FUNÇÕES & OPERAÇÕES

FunçõesFunções permitem

manipular valores.

OperaçõesOperações permitem somar,

subtrair, dividir, multiplicar

propriedadespropriedades e corescores.

// LESS

@the-border: 1px;

@base-color: #111;

@red: #842210;

#header {

color: (@base-color * 3);

border-left: @the-border;

border-right: (@the-border * 2);

}

#footer {

color: (@base-color + #003300);

border-color: desaturate(@red, 10%);

}

// Compiled CSS

#header {

color: #333;

border-left: 1px;

border-right: 2px;

}

#footer {

color: #114411;

border-color: #7d2717;

}

FUNÇÕES & OPERAÇÕES

AGENDA

A Linguagem

Como começar

Variáveis

Mixins

Regras Aninhadas

Funções e Operações

Importação de stylesheetImportação de stylesheet

Escopo de variáveis

Referências

IMPORTAÇÃO

Que tal modularizarmodularizar os

arquivos .lessless?

// topo.less

@colorFundo: #FFCC00;

#fundo {

background-color:@colorFundo;

}

// importando os outros arquivos

@import "topo.less";

@import "conteudo.less";

@import "rodape.less";

IMPORTAÇÃO

.css.cssvariáveivariávei

ss

AGENDA

A Linguagem

Como começar

Variáveis

Mixins

Regras Aninhadas

Funções e Operações

Importação de stylesheet

Escopo de variáveisEscopo de variáveis

Referências

ESCOPO DE VARIÁVEIS

Variáveis podem ser criadas

em diferentes escopos.

Os Escopos são delimitadosdelimitados

por seletores de elementosseletores de elementos

ou mixinsmixins.

@var: red;

#page {

@var: white;

#header {

color: @var; // whitewhite

}

}

#footer {

color: @var; // redred

}

ESCOPO DE VARIÁVEIS

AGENDA

A Linguagem

Como começar

Variáveis

Mixins

Regras Aninhadas

Funções e Operações

Importação de stylesheet

Escopo de variáveis

ReferênciasReferências

REFERÊNCIAS

http://lesscss.org/

http://lesscss.loopinfinito.com.br/http://lesscss.loopinfinito.com.br/

REFERÊNCIAS

LESS. LESS. The dynamic stylesheet languageThe dynamic stylesheet language. <. <http://lesscss.org/>. Acesso >. Acesso

em 03/11/2013.em 03/11/2013.

LOPES, Sérgio. LOPES, Sérgio. CSS fácil, flexível e dinâmico com LessCSS fácil, flexível e dinâmico com Less. .

<http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/>. <http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/>.

Acesso em 03/11/2013.Acesso em 03/11/2013.

LOPES, Sérgio. LOPES, Sérgio. Saiba o que é Less, e como ele pode agilizar seu Saiba o que é Less, e como ele pode agilizar seu

trabalhotrabalho. <http://tutsmais.com.br/blog/css/saiba-o-que-e-less-e-. <http://tutsmais.com.br/blog/css/saiba-o-que-e-less-e-

como-ele-pode-agilizar-seu-trabalho/>. Acesso em 03/11/2013.como-ele-pode-agilizar-seu-trabalho/>. Acesso em 03/11/2013.