Less CSS

{less}
css menos cdigo

helder da rocha
(18 de maro 2014)
{less} {1:intiouuo }

2
{apresentao}
Pi-piocessauoies CSS como Less e SASSSCSS so hoje feiiamentas essenciais
paia o uesenvolvimento Web. Eles estenuem o CSS com iecuisos que toinam o
uesenvolvimento mais eficiente, mais fcil ue mantei e ieutilizai. Less um uos
mais populaies pi-piocessauoies CSS. E usauo em bibliotecas ue temas,
aplicaes e em fiamewoiks populaies ue uesign iesponsivo como o Twittei
Bootstiap.
Este cuiso exploia a tecnologia Less em uetalhes, ofeiecenuo uma intiouuo
abiangente e cobiinuo topicos mais avanauos atiavs ue exemplos. voc ueve
conhecei BTNL e CSS, uma vez que Less uma extenso uo CSS e tambm
impoitante entenuei o CSS que geiauo quanuo se usa Less. No pieciso
conhecei }avaSciipt, mas se voc soubei usai a linguagem pouei exploiai
alguns iecuisos no-essenciais ue Less que iequeiem }avaSciipt. 0 uso ue Less
com }avaSciipt aboiuauo em um uos topicos uo capitulo 9.
Less geia CSS, ento mais impoitante obseivai o couigo geiauo que a apaincia
uo efeito uo CSS na pgina. Ao uepuiai couigo Less essencial tei acesso ao CSS
geiauo. Neste cuiso, paia uemonstiai ueteiminauos conceitos so usauos
exemplos ue Less que geiam CSS que no necessaiiamente seivem paia uso em
pginas Web, ou mesmo CSS incoiieto paia ilustiai uifeientes efeitos uo
piocessamento ue funes ou opeiaes uo Less.
Paia acompanhai este tutoiial voc ueve tei um computauoi com um euitoi ue
textos e um compilauoi Less instalauo. Algumas opes ue euitoies e
compilauoies seio apiesentauas no piimeiio capitulo. 0 capitulo 1u inclui
iefeincias usauos na pesquisa ueste mateiial, tutoiiais, aitigos e outias
infoimaes que seio teis uuiante o tieinamento.

S
{arquivos}
0 couigo mostiauo nos exemplos ueste livio poue sei baixauo ua Inteinet no
site: http:github.comaigonavisbiLessCouise em foimato ZIP ou atiavs ue
uIT !"#$%.
Touo o couigo foi testauo e compilauo usanuo a veiso 1.7 uo Less (feveieiio ue
2u14) uuiante a geiao uo texto ueste livio em XNL. 0 texto foi esciito em
Naikuown e posteiioimente tiansfoimauo em BTNL e XNL, que foi usauo paia
geiai o uocumento em RTF. As fontes .less apiesentauas no livio e os
iesultauos .css iesultantes ua compilao esto touos uisponiveis na
pasta examples, em sub-pastas coiiesponuentes a caua capitulo. Alguns
exemplos utilizam aiquivos BTNL e imagens que esto uisponiveis nas
pastas html e images, iespectivamente.

{distribuio e termos de uso}
Este livio uistiibuiuo ue acoiuo com a licena &'%()*+% &#--#$. /0('%12"*3%. 0
texto ueste livio, imagens e couigo-fonte ue exemplos e exeicicios so mantiuos e
atualizauos no iepositoiio http:github.comaigonavisbiLessCouise. Esta
veiso (1.u.u) foi ciiaua em 18 ue maio ue 2u14.

{sobre o autor}
Beluei ua Rocha piogiamauoi, esciitoi, piofessoi, atoi, msico e aitista
plstico. Tiabalha com tecnologias Web e }ava uesue 1994. E autoi ue um livio
sobie BTNL e CSS publicauo em 1996, e sobie }avaSciipt publicauo em 1998, e
ue uiveisos tutoiiais uisponibilizauos online sobie }ava, XNL e tecnologias
ielacionauas. Ele poue sei contactauo pelo email 0%"4%'5('6#$(+*.7!#-78'.


4
{contedo resumido}
{1: |ntroduo } ................................................................................................... 8
{2: an|nhamento } ............................................................................................. 18
{3: var|ve|s } .................................................................................................... 26
{4: extend } ....................................................................................................... 31
{S: m|x|ns } ........................................................................................................ 41
{6: operaes e funes } .................................................................................. 60
{7: |oops.guards } .............................................................................................. 7S
{8: cores } .......................................................................................................... 8S
{9: +|ess } .......................................................................................................... 96
{10: refernc|as } .............................................................................................. 108


S
{contedo em detalhes}

{1: |ntroduo } 8
1.1 0 que Less. 8
1.2 Poi que usai less. 8
97:79 ;('*<+%*. =
97:7: >*?*$. @
97:7A 2$*$0(-%$)# % %.!#B# @
97:7C D?)%$.E# 9F
97:7G HB%'(4#'%. % IJ$KL%. 9F
1.S Como usai 11
1.4 Compilao 12
97C79 M*$0( 4% !#-($4# 9:
97C7: N%''(-%$)(. 6'<I*!(. 9:
1.S Ambientes ue uesenvolvimento 1S
97G79 O%.)% 4# (-8*%$)% 9G
1.6 Compilao em tempo ieal 16
1.7 veises e alteinativas 17
{2: an|nhamento } 18
2.1 Less CSS, CSS no Less 18
2.2 Aninhamento ue ueclaiaes 18
2.S Comentiios 21
2.4 0 simbolo '&' (seletoi pai) 22
:7C79 2$*$0(-%$)# !#- B.%J4#1.%"%)#'%. :A
:7C7: /%"%)#'%. !#- $#-%. .%-%"0($)%. :C
:7C7A &#$!()%$(KE# !#- P :C
{3: var|ve|s } 26
S.1 vaiiveis globais 26
S.2 Escopo e vaiiveis locais 27
S.S vaiiveis inteipolauas 29
{4: extend } 31
4.1 :extenu S1
4.2 Extenso mltipla S2
4.S Extenso com seletoies aninhauos SS
4.4 Sobieposio ue piopiieuaues S4

6
4.S Pseuuo-elementos e vaiiveis SS
4.6 Coiiesponuncia exata S6
4.7 Coiiesponuncia paicial S7
4.8 Escopo S8
4.9 Quanuo usai :extenu S9
{S: m|x|ns } 41
S.1 Nixins 41
S.2 Nixins com blocos aninhauos 4S
S.S !impoitant 44
S.4 Nixins com paimetios 44
S.S Sintaxes alteinativas (e pioblemticas) 47
S.6 Nixins com nmeio vaiivel ue aigumentos 48
G7Q79 2 +('*<+%" @arguments GF
G7Q7: 2 +('*<+%" ... R)'S. B#$)#.T G9
G7Q7A 2 +('*<+%" @$#-%... G:
S.7 Sobiecaiga ue mixins SS
S.8 Nixins paia CSS multi-biowsei SS
S.9 Nixins que ietoinam valoies S6
S.1u Nixins com :extenu S7
S.11 Agiegao ue valoies S8
{6: operaes e funes } 60
6.1 0peiaes aiitmticas 6u
6.2 0peiaes usanuo uniuaues 62
6.S Aiieuonuamento e peicentagem 6S
6.4 Conveiso ue uniuaues 64
6.S Funes matemticas e tiigonomtiicas 6S
6.6 Funes que opeiam sobie colees 67
6.7 Tiansfoimao e foimatao ue texto 68
6.8 Sintaxes pioblemticas 72
{7: |oops.guards } 7S
7.1 Nixins conuicionais (mixin guaius) 7S
U7979 HB%'(4#'%. !#$4*!*#$(*. UU
U797: V$+%'.E# 4% J-( !#$4*KE# UU
U797A W%)%!KE# 4% )*B#. % J$*4(4%. UU
U797C &#-8*$(KE# 4% %?B'%..L%. !#$4*!*#$(*. U@
7.2 Seletoies conuicionais 81
7.S Nixins iecuisivos (loops) 82
{8: cores } 8S
8.1 Befinio ue coies 8S
=7979 XYB"*!(. 4% IJ$KL%. 4# &// =Q
=797: NJ$KL%. Z/; =U
8.2 Extiao ue componentes ue coies 88
=7:79 &#-B#$%$)%. X[\2 ==

7
=7:7: &#-B#$%$)%. Z/M % Z/; ==
=7:7A MJ-( =@
8.S 0peiaes sobie coies inuiviuuais 9u
=7A79 /()J'(KE# @F
=7A7: MJ-*$]$!*( @9
=7A7A >()*^ @:
=7A7C O'($.B('S$!*( @A
8.4 0peiaes ue combinao ue coies 9S
=7C79 /*-Y)'*!(. @A
=7C7: 2..*-Y)'*!(. @C
{9: +|ess } 96
9.1 Impoitao ue estilos 96
@7979 V-B#') % +('*<+%*. @U
@797: \*8"*#)%!(. _)%*. @U
9.2 Acessibiliuaue e supoite multi-platafoima 98
@7:79 &#$)'(.)% @=
@7:7: &#$+%'.E# 4% !#' B('( I#'-()# >*!'#.#I) @@
@7:7A &#$+%'.(# 4()(1J'* 9FF
9.S Bibliotecas ue mixins com namespaces 1uu
9.4 0so ue less no biowsei 1u1
@7C79 W%.%$+#"+*-%$)# % 4%BJ'(KE# $# 8'#`.%' 9F9
9.S Execuo ue }avaSciipt via Less 1u2
@7G79 2!%..# (# WH> 4# 8'#`.%' +*( a(+(/!'*B) 9FA
9.6 Inteiaginuo com o paisei 1u4
@7Q79 /J8.)*)J*KE# 4% +('*<+%*. $# 8'#`.%' 9FC
@7Q7: NJ$KL%. !J.)#-*^(4(. 9FC
@7Q7A M%*)J'( 4% +('*<+%*. 9FG
@7Q7C b.# %- (B"*!(KL%. c#4%7d. 9FQ
9.7 0pes ue linha ue comanuo 1u6
{10: refernc|as } 108
1u.1 Especificaes e uocumentao oficial 1u8
1u.2 Aitigos e exemplos 1u8
1u.S Tutoiiais no-oficiais 1u9
1u.4 Bibliotecas 1u9
1u.S Feiiamentas 11u


8
{1: !"#$%&'()% +
1.1 C que Less?
Less um B'Y1B'#!%..(4#' CSS. Ele 6%'( CSS. E tambm uma %?)%$.E# uo CSS: um
uocumento CSS um uocumento Less vliuo. Less aciescenta viios iecuisos que
toinam mais eficientes a ciiao e manuteno ue folhas ue estilo uo CSS.
1.2 or que usar |ess?
Less no necessiio, mas Less tambm no quebia os pauies existentes (no
uepenue ue supoite ue biowsei) e toina o CSS mais fcil ue mantei.
Bocumentos Less so bem mais cuitos que uocumentos CSS e geialmente tm
muito menos iepetio ue couigo. Alguns uos iecuisos que Less aciescenta ao
CSS incluem funes, vaiiveis, mixins, conuicionais, escopo, aninhamento ue
blocos e outios iecuisos comuns em linguagens ue piogiamao. Less tambm
facilita a ciiao ue folhas ue estilo inuepenuentes ue biowsei e platafoima.
1.2.1 Var|ve|s
Less supoita constantes (que so chamauas ue +('*<+%*.). Atiavs uelas
possivel ueclaiai um valoi (ex: uma coi, uil ou fonte) e ieusai esse valoi viias
vezes na folha ue estilos, evitanuo a iepetio e facilitanuo a alteiao. Poi
exemplo:
@cor-base: #f74020;
.sec1 {
color: @cor-base;
border-color: @cor-base;
}

9
1.2.2 M|x|ns
Com Less possivel utilizai uma coleo ue piopiieuaues ueclaiauas paia um
seletoi viias vezes, simplesmente incluinuo o nome uo seletoi uentio ue outio
bloco. Esses seletoies so chamauos ue -*?*$..
Poue-se ainua ciiai mixins que iecebem paimetios, mixins que uefinem
vaiiveis ue ietoino, mixins conuicionais e mixins iecuisivos que funcionam
como loops.
0 piimeiio seletoi abaixo est senuo usauo no segunuo como um mixin.
.girar-90-graus {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}

.titulo-lateral {
font-weight: 900;
.girar-90-graus; // props de .gerar-90-graus sero inseridas aqui
}
As uuas baiias // iepiesentam um bloco ue comentiio em Less.
1.2.3 An|nhamento e escopo
Paia aplicai um estilo em um elemento ue acoiuo com seu contexto, CSS uefine
uma sintaxe compacta:
.secao > div .item {
color: blue;
}
Nas que causa iepetio ue couigo se tambm foi necessiio aplicai estilos nos
outios elementos uo contexto:
.secao > div {
width: 560px;
}

.secao {
position: absolute;
}
Less aciescenta uma segunua sintaxe que evita a iepetio ue couigo em
situaes como esta, e tambm ciia um escopo onue pouem sei usauas vaiiveis
locais.
0s tis blocos acima poueiiam sei ieuuziuos a um so bloco usanuo ueclaiaes
aninhauas em Less:

1u
.secao {
position: absolute;
> div {
width: 560px;
.item {
color: blue;
}
}
}
1.2.4 Lxtenso
Suponha que voc tenha o seguinte CSS:
.secao1, .lateral {
background: url(images/bg.svg);
color: #f789a1;
}
.tabela td td > p {
font-weight: bold;
text-decoration: underline;
}
.secao2 {
border: solid blue 1px;
}
Agoia voc necessita que um novo seletoi .secao2 tenha touos os estilos
ue .lateral e .tabela td td > p . Isto poue sei feito atiavs ua auio ue
.secao2 nas outias uuas ueclaiaes acima:
.secao2, .secao1, .lateral {
background: url(images/bg.svg);
color: #f789a1;
}
.secao2, .tabela td td > p {
font-weight: bold;
}
.secao2 {
}
Less faz esse tipo ue opeiao automaticamente com o pseuuo-seletoi :extend,
geianuo o CSS acima:
.secao2:extend(.lateral, .tabela td td > p) {
}
1.2.S Cperadores e funes
Nuitas vezes piecisamos fazei contas em CSS paia alteiai posicionamentos e
coies. Less facilita isto aciescentanuo ao CSS a possibiliuaue ue se usai
opeiaes aiitmticas, blocos conuicionais, blocos ue iepetio, funes
matemticas e funes ue manipulao ue coies. Combinauo com o uso ue

11
vaiiveis e mixins poue-se automatizai uiveisas taiefas iepetitivas e evitai usai
outias linguagens ue piogiamao paia geiai coies e uimenses.
@largura-total: 1024px;
@largura-bloco: 960px;
@margem-esquerda: (@largura-total - @largura-bloco) / 2;
@cor-base: #800080;
.secao3 {
left: @margem-esquerda;
background: darken(@cor-base + #008000, 20%);
color: spin(@cor-base, 180deg); // inverte a cor girando a matiz
}
0 couigo acima geia o seguinte CSS:
.secao3 {
left: 32px;
background: #4d4d4d;
color: #008000;
}
1.3 Como usar
0 uesenvolvimento com Less possui uuas etapas:
1. Ciiao uo aiquivo .less
2. Compilao uo aiquivo .less (geiao ue um aiquivo CSS)
Noimalmente Less usauo apenas em uesenvolvimento. E possivel caiiegai um
uocumento .less uiietamente no biowsei que ii geiai um CSS uuiante a caiga
ua pgina, poim isto costuma sei ineficiente e poue fazei com que a
ienueiizao ua pgina uemoie.
0m uocumento Less poue sei ciiauo em qualquei euitoi ue textos. viias
feiiamentas ue uesenvolvimento Web populaies supoitam Less ou ue foima
nativa ou via plugin. Elas fazem a geiao uo CSS automaticamente.
Less Y CSS, ento paia ciiai um uocumento .less poue-se simplesmente usai um
uocumento CSS e alteiai a sua extenso paia .less.
B uuas opes paia geiai CSS atiavs ue um uocumento Less:
1. 0sai o compilauoi lessc (linha ue comanuo)
2. 0sai compilauoies automticos (lessc com opo --watch, compilauoies
gificos, plugins)

12
1.4 Comp||ao
1.4.1 L|nha de comando
Em sistemas Winuows, Nac ou Linux, o Less instalauo como aplicao
}avaSciipt (Noue.js) atiavs uo c#4% e(!3(6% >($(6%' (NPN). Se o Less estivei
instalauo no seu sistema, abia uma janela uo teiminal ue comanuos e uigite:
lessc -version
Na tela sei impiessa a veiso uo Less que est instalaua no seu sistema. Este
tutoiial assume que voc est usanuo pelo menos a veiso 1.7.
Paia geiai um aiquivo CSS a paitii ue um uocumento Less, a sintaxe :
lessc arquivo.less > arquivo.css
0 compilauoi lessc possui viias opes uocumentauas no site oficial uo Less
em 0))Bfgg"%..!..7#'6. 0ma uas opes peimite configuiai a aplicao paia
monitoiai uocumentos .less ou pastas, e geiai o .css automaticamente a
caua alteiao.
1.4.2 Ierramentas grf|cas
Se voc no se sente muito vontaue usanuo o teiminal, existe a opo ue
utilizai um compilauoi gifico como "%..7(BB (>(! H/T ou h*$M%.. (h*$4#`.).
Eles peimitem configuiai um ambiente onue aiquivo seio compilauos e
iecompilauos sempie que foiem alteiauos, e no piecisam uo teiminal.


1S
0 "%..7(BB (imagem acima) paia Nac0S peimite associai uma pasta ou
uocumentos inuiviuuais que seio monitoiauos A caua alteiao eles seio
compilauos. Poue-se configuiai o uiietoiio onue os uocumentos CSS iesultantes
ua compilao seio guaiuauos.
0 h*$M%.. similai ao "%..7(BB paia sistemas Winuows.

Tambm existem feiiamentas paia outias platafoimas como Linux.
1.S Amb|entes de desenvo|v|mento
voc poue integiai o Less ao seu ambiente ue uesenvolvimento. No site oficial
"%..!..7#'6 h uma lista ue IBEs e feiiamentas ue Web Besign que supoitam Less,
e viios outios que tm plugins que fazem a compilao automtica.
0m ambiente integiauo poue sei mais piouutivo poi tei iecuisos como busca e
substituio, euio ue BTNL, uepuiao ue }avaSciipt, que muitas vezes fazem
paite ue aplicaes que usam Less.
0m euitoi populai que tem supoite a Less o 24#8% \'(!3%)., que usauo paia
aplicaes Web em geial e giatuito:

14

0 &'J$!0 uma feiiamenta completa que peimite ciiai e euitai uocumentos Less
e tambm iealiza a geiao automtica e compiesso ue CSS:


1S
A imagem abaixo mostia uma tela uo a%)\'(*$. h%8/)#'- com couigo Less em
uma janela supeiioi, e couigo CSS senuo geiauo em uma janela infeiioi.

Finalmente, se voc piecisa ue uma feiiamenta accessivel ue qualquei lugai
poue usai o site "%..)%.)%'7!#-, onue voc poue colai o conteuo ue um aiquivo
.less e obtei o iesultauo ua compilao em CSS.

1.S.1 1este do amb|ente
Escolha o seu ambiente ue uesenvolvimento piefeiiuo, e teste a sua instalao
ciianuo o aiquivo ue testes abaixo:

16
@cor-principal: #FF8800;
#secao {
color: @cor-principal;
border-color: @cor-principal;
background: lighten(@cor-principal, 50%);
a:hover {
color: darken(@cor-principal, 30%);
}
}
uiave o aiquivo em uma pasta e use uma uas feiiamentas listauas acima paia
geiai o CSS. 0 iesultauo ueve sei semelhante ao CSS abaixo:
#secao {
color: #ff8800;
border-color: #ff8800;
background: #ffffff;
}

#secao a:hover {
color: #663600;
}
1.6 Comp||ao em tempo rea|
0 piogiama lessc e as feiiamentas acima listauas so pi-piocessauoies
estticos. Isto quei uizei que eles compilam o Less geianuo um aiquivo CSS
esttico que ueve sei caiiegauo em suas pginas Web.
voc tambm poue usai folhas ue estilo Less uiietamente no BTNL paia
piocessamento pelo biowsei. Como j foi mencionauo, essa alteinativa lenta e
ineficiente paia uso em piouuo, mas poue sei til em uesenvolvimento.
Paia usai Less no biowsei, pieciso caiiegai o sciipt less.js, que poue sei
baixauo ue https:github.comless:
<script src="less.js" type="text/javascript"></script>
Poue-se tambm usai o less.js uisponivel em um iepositoiio ue couigo na
nuvem (CBN):
<script
src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.js">
</script>
Agoia poue-se incluii folhas ue estilos Less uiietamente usanuo:
<link rel="stylesheet/less" type="text/css" href="teste.less" />
Nas impoitante que as folhas ue estilo Less sejam caiiegauas !"#$% uo sciipt.
Poue-se caiiegai viios uocumentos Less. Caua um sei compilauo
inuiviuualmente, poitanto no possivel compaitilhai vaiiveis e outios

17
iecuisos uo Less entie eles (apenas iecuisos uo CSS). 0 CSS iesultante seguii as
mesmas iegias ue cascaue, na oiuem em que os estilos Less foiam ueclaiauos.
1.7 Verses e a|ternat|vas
Este cuiso foi piepaiauo e testauo com a veiso 1.7 uo Less. 0 Less no possui
uma especificao foimal e toua a uocumentao est uisponivel no site e no
uitBub uo piojeto. Nuitos uetalhes ua linguagem no esto uocumentauos. Se
voc estivei usanuo uma veiso anteiioi uo Less, viios exemplos poueio no
funcionai. Se estivei usanuo uma veiso mais nova, alguns comanuos poueio
sei uifeientes ou at mais simples.
/2// e /)i"J. so outios uois pi-piocessauoies ue CSS que tm objetivos
semelhantes a Less. Ambos tm sintaxes que so extenses uo CSS como o Less,
mas tambm supoitam sintaxes mais compactas, eliminanuo chaves e ponto-e-
viigula. SASS o mais populai uos uois e a sua sintaxe compativel com CSS
(SCSS) tem muitas semelhanas com Less.
{less} {2:aninhamento }

18
{2: !"#"$!%&"'( !
Nesta seo aboiuaiemos um aspecto ua sintaxe uo Less que o uistingue uo CSS:
a possibiliuaue ue aninhai ueclaiaes.
2.1 Less CSS, CSS no Less
0s iecuisos uo Less so )#4#. opcionais. Less uma %?)%$.E# uo CSS. Sempie
poue-se usai CSS puio em uma pgina Less (e isto ueve sei feito, se foi mais
simples e eficiente). Tuuo que CSS tambm Less.
Poi outio lauo, CSS no Less. Less usauo paia geiai um CSS novo, que pouei
ficai maioi e mais iepetitivo que o uocumento oiiginal Less.
Poue-se ciiai uma folha ue estilos Less paitinuo-se ue uma folha ue estilos CSS
existente. A foima mais simples muuai a extenso uo aiquivo paia .less.
Quanuo o aiquivo foi liuo pelo piocessauoi Less sei geiauo um CSS
funcionalmente iuntico. Ele talvez substitua algumas iepiesentaes poi outias
equivalentes (poi exemplo, rgb(255,0,0) sei substituiuo poi #ff0000), mas o
aiquivo geiauo sei equivalente.
A paitii ue um uocumento Less contenuo CSS puio, poue-se fazei alteiaes
giauualmente, aplicanuo iecuisos uo Less como ($*$0(-%$)# 4% 4%!"('(KL%.,
vaiiveis, funes, etc. Este piocesso chamauo ue iefatoiao: ele alteia a
foima ue se expiessai iegias ue estilo sem alteiai o iesultauo. A melhoi maneiia
ue fazei iefatoiao usanuo um euitoi que geie automaticamente o CSS, como
os que foiam apiesentauos no capitulo anteiioi.
2.2 An|nhamento de dec|araes
Less peimite que ueclaiaes CSS sejam ($*$0(4(.. E uma foima alteinativa ue
expiessai ielacionamentos contextuais entie seletoies. Poi exemplo, as uuas
ueclaiaes a seguii em CSS:

19
.artigo {
border: solid red 1px;
font-size: 12pt;
}
.artigo .secao1 {
background-color: black;
color: white;
}
.artigo .secao2 {
background-color: white;
color: black;
}
Pouem sei combinauas em uma nica ueclaiao aninhaua em Less, que
especifica seus ielacionamentos contextuais atiavs uo aninhamento:
.artigo {
font-size: 12pt;
.secao1 {
background-color: black;
color: white;
}
.secao2 {
color: black;
}
}
No h limites paia o nivel ue aninhamento:
.livro {
font-size: 10pt;
.capitulo {
border: solid gray 1px;
.secao {
background-color: #eee;
.titulo {
font-size: 120%;
}
.corpo {
text-align: justify;
}
}
}
}
A ueclaiao aninhaua acima iesulta em cinco ueclaiaes:
.livro {
font-size: 10pt;
}
.livro .capitulo {
border: solid gray 1px;
}
.livro .capitulo .secao {
background-color: #eee;
}
.livro .capitulo .secao .titulo {
font-size: 120%;

2u
}
.livro .capitulo .secao .corpo {
text-align: justify;
}
0(s) seletoi(es) ueclaiauos em um bloco exteino so copiauos antes ue caua
seletoi ue um bloco inteino. Poi exemplo, consiueie o bloco abaixo:
.t1 p {
.t2, .t3 li {
color: blue;
}
}
0s seletoies .t2 e .t3 li seio ambos ieesciitos em CSS como seletoies
contextuais uescenuentes ue .t1 p:
.t1 p .t2, .t1 p .t3 li {
color: blue;
}
Qualquei tipo ue contexto hieiiquico poue sei iepiesentauo, como filho (!0*"4
.%"%!)#'T >, iimo aujacente ((4d(!%$) .*8"*$6 .%"%!)#') (+), etc. como na iegia
abaixo:
.v1 {
+ .v2 {
> .v3 {
font: 12pt;
}
}
}
que geia este CSS:
.v1 + .v2 > .v3 {
font: 12pt;
}
0 uso ue ueclaiaes aninhauas #B!*#$(". ueialmente elas aumentam a
legibiliuaue e facilitam a manuteno mantenuo juntas as iegias aplicauas em
seletoies que tm ielacionamentos hieiiquicos que iefletem a estiutuia uo
BTNL. Nas no uevem sei usauas se uma ueclaiao CSS comum expiessai a
aplicao ue um estilo ue foima -(*. !"('( % !#$!*.(. Poi exemplo, se um
ielacionamento contextual longo apaiece uma nica vez em CSS.
A ueclaiao CSS:
div .notes table .footnotes p {
color: red;
}
bem mais concisa e claia que:

21
div {
.notes {
table {
.footnotes {
p {
color: red;
}
}
}
}
}
Nas se houvei necessiuaue ue aplicai iegias a seletoies inteimeuiiios ua
hieiaiquia, o uso ue seletoies aninhauos poue sei mais vantajoso. 0 impoitante
sempie avaliai os beneficios ue usai ou no ueclaiaes aninhauas em Less.
2.3 Comentr|os
Less CSS, logo supoita comentiios ue bloco CSS, no foimato /* ... */:
/* Este bloco de texto e as duas ltimas propriedades
do ruleset abaixo sero ignoradas pelo browser */
.header {
color: cyan;
/* background: navy;
font-size: 16pt; */
}
Nas tambm supoita !#-%$)<'*#. 4% "*$0(, usanuo uuas baiias //. Este tipo ue
comentiio peimite omitii tiechos ue couigo ua geiao uo CSS final, e no
contiibui paia aumentai o tamanho uo aiquivo CSS. 0 comentiio inicia em //,
afeta apenas a linha em que foi uefiniuo a paitii uesse ponto, e so teimina no fim
ua linha. No possivel teimin-lo antes.
// No CSS, o bloco a seguir ter apenas uma declarao de estilo
// Tambm no ter esta linha, nem a anterior
/* Mas estas linhas estaro presentes no CSS,
embora sejam ignoradas pelo browser */
.header {
color: cyan;
// background: navy;
}
Apenas os comentiios ue bloco so pieseivauos no CSS final:
/* Mas estas linhas estaro presentes no CSS,
embora sejam ignoradas pelo browser */
.header {
color: cyan;
}

22
2.4 C s|mbo|o '&' (se|etor pa|)
vimos que o aninhamento ciia seletoies contextuais ao posicionai os seletoies
ue um bloco inteino como 4%.!%$4%$)%. uos seletoies uo bloco exteino. 0
simbolo & usauo paia iepiesentai o acumulauo ue seletoies uo bloco exteino.
Consiueie a iegia abaixo:
.t1 {
& .t2 {
& .t3 {
font: 12pt;
}
}
}
Ela ii geiai o seguinte CSS:
.t1 .t2 .t3 {
font: 12pt;
}
Que o mesmo geiauo se o & no estivesse piesente.
.t1 {
.t2 {
.t3 {
font: 12pt;
}
}
}
Nas pouemos usai o & paia B#.*!*#$(' os seletoies acumulauos nos blocos
exteinos em outio lugai.
Na iegia abaixo inveitemos a oiuem ue contexto:
.s1 {
.s2 & {
.s3 & {
font: 12pt;
}
}
}
E obtemos o seguinte iesultauo:
.s3 .s2 .s1 {
font: 12pt;
}
Se o simbolo & usauo uma vez, ele .J8.)*)J* a posio uos seletoies heiuauos,
mas se ele apaiecei -(*. 4% J-( +%^, ele '%B%)% esses seletoies, poi exemplo:

2S
.r1 {
& & .r2 {
font: 12pt;
}
}
que tem como iesultauo:
.r1 .r1 .r2 .r1 {
font: 12pt;
}
2.4.1 An|nhamento com pseudo-se|etores
0 aninhamento no se limita a seletoies contextuais. E possivel usai o
simbolo & em classes, pseuuo-classes e pseuuo-elementos.
0 exemplo abaixo aplica aplica uois pseuuo-elementos em .tag
.tag {
&:before {Content: '<'}
&:after {Content: '/>'}
}
Resultauo em CSS:
.tag:before {
Content: '<';
}

.tag:after {
Content: '/>';
}
A iegia abaixo aplica uma pseuuo-classe no seletoi div p e uma classe (.last)
no seletoi div:
div {
p {
&:first-child {color: red;}
}
&.last {color: blue;}
}
Piouuzinuo este iesultauo em CSS:
div p:first-child {
color: red;
}

div.last {
color: blue;
}

24
2.4.2 Se|etores com nomes seme|hantes
0 seletoi & poue sei usauo paia ciiai novos seletoies que iepetem paite uo
nome, como poi exemplo em sees numeiauas:
.secao {
&-1 {
background-color: lightgreen;
}

&-2 {
background-color: lightblue;
}
}
0 iesultauo em CSS uo couigo acima :
.secao-1 {
background-color: lightgreen;
}

.secao-2 {
background-color: lightblue;
}
2.4.3 Concatenao com &
0sanuo & copia o seletoi, mas se houvei muitos seletoies sepaiauos poi viigula,
como se compoita o seletoi &.
.a, .b, .c {
& > & {
color: darkgreen;
}

& + & {
color: olive;
}
}
Ele se multiplica! Aplica o bloco ue iegias a touas as combinaes possiveis entie
os seletoies uo bloco exteino. 0 couigo acima geia este CSS:
.a > .a, .a > .b, .a > .c,
.b > .a, .b > .b, .b > .c,
.c > .a, .c > .b, .c > .c {
color: darkgreen;
}

.a + .a, .a + .b, .a + .c,
.b + .a, .b + .b, .b + .c,
.c + .a, .c + .b, .c + .c {
color: olive;
}
Poue-se tambm aplicai classes aos seletoies:

2S
.a, .b {
&& & {
color: darkred;
}
}
0 couigo acima piouuz oito combinaes uifeientes envolvenuo contexto e
classe, como mostia o iesultauo em CSS:
.a.a .a, .a.a .b, .a.b .a,
.a.b .b, .b.a .a, .b.a .b,
.b.b .a, .b.b .b {
color: darkred;
}

{less} {S:vaiiveis }

26
{3: !"#$%!&$' )
vaiiveis peimitem aimazenai valoies que seio ieusauos muitas vezes. E muito
comum que ceitos valoies como coies, fontes, uimenses, etc. sejam iepetiuas
viias vezes em uma folha ue estilo CSS. As vaiiveis uo Less peimitem eliminai
essa iepetio. E possivel ainua iealizai #B%'(KL%. com vaiiveis, pass-las como
aigumentos paia funes, etc.
vaiiveis uevem tei a seguinte sintaxe:
@nome: valores;
0 nome poue sei qualquei nome que no seja uma uiietiva uo CSS (poi exemplo,
no poue sei import ou media). 0s valores pouem quaisquei valoies ou listas
ue valoies vliuas em CSS ou mesmo expiesses sobie valoies ou vaiiveis.
3.1 Var|ve|s g|oba|s
0ma vaiivel poue sei 6"#8(" ou tei o escopo limitauo a um 8"#!#. vaiivels
globais uevem sei ueclaiauas I#'( ue blocos, em uma linha piopiia. veja alguns
exemplos:
@tipologia: "Times New Roman", "Times", serif;
@largura: 15em;
@cor-base: rgb(255, 255, 255);
@altura: @largura * 2;
0ma vez ueclaiaua, uma vaiivel global poue sei usaua no lugai ue valoies ue
piopiieuaues CSS em qualquei lugai uo aiquivo:
h1 {
font-family: @tipologia;
height: @altura;
width: @largura;
}
0 CSS geiauo sei

27
h1 {
font-family: "Times New Roman", "Times", serif;
height: 30em;
width: 15em;
color: #ffffff;
}
As vaiiveis globais pouem sei ueclaiauas em qualquei paite uo uocumento
Less, mesmo 4%B#*. uos blocos que as utilizam. A oiuem em que so ueclaiauas
iiielevante. Nas uma boa pitica auotai uma oiuem seqencial e mant-las no
inicio uo uocumento paia facilitai a legibiliuaue e manuteno uo couigo.
3.2 Lscopo e var|ve|s |oca|s
As chaves que uelimitam blocos limitam o escopo uas vaiiveis. Se uma vaiivel
uefiniua uentio ue um bloco ela "#!(" ao bloco. 0 valoi uela vale paia touo o
bloco e paia os blocos que estejam aninhauos %- J- $j+%" -(*. 8(*?#. 0 valoi
uefiniuo paia uma vaiivel ueclaiaua uentio ue um bloco no visivel em blocos
exteinos ou no contexto global.
No exemplo abaixo h vaiiveis em tis niveis ue escopo. @global poue sei
usaua em qualquei lugai uo uocumento. @local-1 foi uefiniua uentio uo
contexto uo bloco header, ento so poue sei usaua 4%$)'# uesse bloco e em
blocos aninhauos (como o div). @global poue sei usaua em qualquei bloco
aninhauo. Finalmente em div h uma vaiivel @local-2 uefiniua, que no existe
foia uesse bloco.
@global: 'Global';
header {
@local-1: 'Local ao header';
content: @global, @local-1;
div {
@local-2: 'Local ao div';
content:@global, @local-1, @local-2;
} // aqui no existe @local-2
} // aqui no existe local-1 ou local-2
footer {
content: @global;
}
0 CSS iesultante uesse uocumento Less :
header {
content: 'Global', 'Local ao header';
}
header div {
content: 'Global', 'Local ao header', 'Local ao div';
}
footer {
content: 'Global';
}

28
0 piocessauoi Less exibe uma mensagem ue eiio e no geia o CSS se uma
vaiivel foi usaua foia uo contexto onue ela ueclaiaua. Nas
possivel 4%!"('(' vaiiveis em um contexto global com um valoi qualquei,
e '%4%I*$*' essa vaiivel em um contexto local ueclaianuo-a novamente (mesmo
nome) com outio valoi. Nesse caso, o novo +("#' ua vaiivel sei vliuo apenas
nesse contexto. Quanuo o bloco onue o valoi foi ieuefiniuo teiminai, a vaiivel
volta paia o seu valoi antigo:
@global: 'Global';
article {
@global: "Local ao article";
content: @global;
section {
content: @global;
}
}
aside {
content: @global;
}
No exemplo acima, a vaiivel @global foi ieuefiniua no bloco article, e o novo
valoi vale no apenas paia touas as vezes que a vaiivel foi usaua uentio uo
bloco, mas tambm em qualquei bloco ($*$0(4#, como section. 0
bloco aside est foia uo bloco poitanto v o valoi oiiginal ue @global, pois a
ieuefinio tem escopo limitauo pelo bloco.
article {
content: "Local ao article";
}
article section {
content: "Local ao article";
}
aside {
content: 'Global';
}
Assim como ocoiie no uocumento com vaiiveis globais, a #'4%- uas
ueclaiaes uentio ue caua bloco iiielevante. voc poue ueclaiai uma vaiivel
no final ue um bloco, que o valoi uela valei paia o bloco inteiio e touos os sub-
blocos, mesmo que tenham siuo ueclaiauos antes. Somente o ($*$0(-%$)# uos
blocos limita o escopo ue vaiiveis. A oiuem no mesmo bloco no afeta o escopo.
0 exemplo anteiioi poueiia tei siuo esciito ua foima abaixo e geiaiia o mesmo
CSS:
article {
content: @global;
section {
content: @global;
}
@global: "Local ao article";
}


29
aside {
Content: @global;
}

@global: 'Global';
E impoitante entenuei esse funcionamento paia no tei suipiesas. E igualmente
impoitante evitai escievei uocumentos Less assim, pois eles ficam menos
legiveis paia quem piecisa mant-los.
3.3 Var|ve|s |nterpo|adas
vaiiveis no seivem apenas paia guaiuai valoies ue piopiieuaues. Pouem sei
usauas paia contei outios textos, tais como nomes ue piopiieuaues, seletoies,
0RLs, etc. Neste caso a 4%!"('(KE# continua igual, mas paia J.(' a vaiivel
pieciso usai uma sintaxe uifeiente com o nome ua vaiivel (sem o @) entie
chaves ua foima @{variavel}.
0 exemplo abaixo ueclaia quatio vaiiveis que so usauas ue uiveisas maneiias
uifeientes usanuo inteipolao:
Como seletoi: vaiivel @classe;
Como nome ue uma piopiieuaue CSS: vaiivel @transparencia;
Como paite uo nome ue uma piopiieuaue: vaiivel @prop;
Como paite uo stiing usauo em uma 0RL: vaiivel @diretorio;
@transparencia: opacity;
@classe: coluna;
@diretorio: "../images";
@prop: color;

.@{classe} {
@{transparencia}: 0.5;
border-@{prop}: red;
background: url('@{diretorio}/paisagem.png');
}
0bseive que o uso ue vaiiveis inteipolauas em 0RLs ueve sei 4%$)'# uas aspas
(ou apostiofes). 0 iesultauo em CSS uo Less acima :
.coluna {
opacity: 0.5;
border-color: red;
background: url('../images/paisagem.png');
}
0ma vaiivel tambm poue contei o nome ue outia vaiivel simplesmente
incluinuo mais um @ antes uo nome (que ficai@@nome):
@the-end: "this is the end";
@end: "the-end";

Su
.my-friend {
content: @@end;
}
0 iesultauo sei:
.my-friend {
content: "this is the end";
}
No se poue incluii mais que uois @ seguiuos.

{less} {4:extenu }

S1
{4: !"#!$% '
4.1 :extend
:extend uma pseuuo-classe exclusiva uo Less que copia o conjunto ue iegias
uo seletoi no qual aplicauo, aos conjuntos ue iegias ue #J)'#. .%"%)#'%.
passauos como paimetio. Evita que seletoies sejam iepetiuos muitas vezes.
vejamos um exemplo simples. Consiueie a folha ue estilos abaixo, em CSS puio:
.capitulo {
font: 12pt;
margin: 2px;
}
.secao1 {
content: 'Secao 1';
}
Paia que os estilos ue capitulo tambem sejam aplicauos em .secao1, usanuo
CSS pouemos estenuei o seletoi .secao1 com as iegias ue capitulo uesta
foima:
.capitulo, .secao1 {
font: 12pt;
margin: 2px;
}
A pseuuo-classe :extend uo Less ofeiece uma foima alteinativa ue obtei esse
iesultauo, incluinuo essa infoimao em um seletoi que heiua as ueclaiaes ue
estilo uos seletoies passauos como paimetio.
Em Less paia obtei o iesultauo acima poue-se fazei:
.secao1:extend(.capitulo) {
content: 'Secao 1';
}
0 iesultauo pitico paia a classe .secao1 sei:
{less} {4:extenu }

S2
.secao1 {
content: 'Secao 1';
font: 12pt;
margin: 2px;
}
Nas a geiao uo CSS inteiio sepaiai esse iesultauo em uuas ueclaiaes, paia
evitai a iepetio uas iegias ue .capitulo:
.capitulo, .secao1 {
font: 12pt;
margin: 2px;
}

.secao1 {
content: 'Secao 1';
}
4.2 Lxtenso m|t|p|a
:extend poue sei aplicaua a viios seletoies, e incluii iegias ue touos eles.
No seguinte exemplo secao1, secao2 e livro2 tem um conjunto ue iegias +(^*#.
0 seletoi secao1 sei estenuiuo com as mesmas iegias ue .capitulo, secao2
sei estenuiuo com as iegias que foiam uefiniuas paia secao1 mais as
ue .capitulo. livro tei a combinao uas iegias ue div e header:
div, .capitulo, #copy {
font: 12pt;
margin: 2px;
}

.prefacio, header {
color: #111;
background: #eee;
}

.livro {
padding: 2px;
}

.secao1:extend(.capitulo) {}
.secao2:extend(.secao1, .capitulo) {}
.livro:extend(div, header) {}
A iegia ue extenso aplicaua a secao2 tambm poue sei esciita como:
.secao2:extend(.secao1):extend(.capitulo) {}
Ainua havei muita iepetio se foi necessiio aplicai a mesma iegia ue
extenso a viios seletoies:
.secao1:extend(.capitulo, .prefacio),
.secao2:extend(.capitulo, .prefacio),
.secao3:extend(.capitulo, .prefacio) {}
{less} {4:extenu }

SS
Less iesolve esse pioblema usanuo o simbolo &, que iepiesenta o conjunto uos
seletoies acumulauos no bloco exteino. Assim possivel aplicai a mesma iegia
ue extenso a viios seletoies usanuo um nico :extend, obtenuo o mesmo
iesultauo uo bloco acima:
.secao1, .secao2, .secao3 {
&:extend(.capitulo, .prefacio);
}
0 bloco acima tambm poue sei esciito ua foima abaixo:
.secao1, .secao2, .secao3 {
&:extend(.prefacio);
&:extend(.capitulo);
}
Que tem como iesultauo em CSS:
.capitulo, .secao1, .secao2, .secao3 {
font: 12pt;
margin: 2px;
}
.prefacio, .secao1, .secao2, .secao3 {
color: #111;
background: #eee;
}
4.3 Lxtenso com se|etores an|nhados
Nais um exemplo com :extend usanuo seletoies contextuais e aninhamento. 0
couigo abaixo:
s1 d1, s2 {
&:extend(s3, s4 d2)
}
Poue tambm sei esciito como:
s1 d1:extend(s3, s4 d2), s2:extend(s3, s4 d2) {}
ou:
s1 d1:extend(s3):extend(s4 d2), s2:extend(s3):extend(s4 d2) {}
ou ainua:
s1 d1:extend(s3) {}
s1 d1:extend(s4 d2) {}
s2:extend(s3) {}
s2:extend(s4 d2) {}
{less} {4:extenu }

S4
Suponuo que tambm existam as seguintes ueclaiaes, nas quais apaiecem os
seletoies s3 e s4 d2 (obseive que o contexto s4 d2 ievela-se no aninhamento):
t1, t3, s3, t4 {color: blue}
n1, s4 {
content: 'nothing';
d2 {
font-size: 12pt
}
}
0 CSS iesultante sei
t1, t3, s3, t4, s1 d1, s2 {
color: #0000ff;
}
n1 d2, s4 d2, s1 d1, s2 {
font-size: 12pt;
}
n1, s4 {
content: 'nothing';
}
0s blocos vazios, se no tiveiem piopiieuaues, so iemoviuos.
4.4 Sobrepos|o de propr|edades
:extend no impeue a ciiao ue piopiieuaues uuplicauas. Elas pouem ocoiiei
no mesmo bloco ou em blocos uifeientes aplicauas ao mesmo seletoi. As iegias
sobie qual tei pieceuncia so as mesmas uo CSS: uentio ue um mesmo bloco,
se houvei uuas ueclaiaes afetanuo a mesma piopiieuaue, vale a que foi
uefiniua poi ltimo; uentio uo mesmo uocumento, piopiieuaues aplicauas a
seletoies iunticos em blocos uifeientes, tambm vale a ltima.
No exemplo abaixo o seletoi .n7 tem background: orange, mas tambm tem
uois :extend que iio fazei com que o seletoi.n7 seja iepetiuo nos blocos .n1 e
.n2. No faz uifeiena a oiuem em que os &:extend apaiecem no piimeiio bloco,
mas a posio uos blocos .n2 e .n1. 0 &:extend(.n2) foi chamauo
apos &:extend(.n1), poim no uocumento, o bloco em que apaiece .n1 o
ltimo.
.n7 {
&:extend(.n1);
background: orange;
&:extend(.n2);
}
.n2 {
background: green;
}
.n1 {
color: yellow;
background: red;
{less} {4:extenu }

SS
}
.n7 sei estenuiuo com o conteuo ue .n1 e .n2 ua seguinte foima no CSS
geiauo:
.n7 {
background: orange;
}
.n2, .n7 {
background: green;
}
.n1, .n7 {
color: yellow;
background: red;
}
Como touos os tis blocos uefinem a piopiieuaue backgiounu paia o mesmo
seletoi .n7, apenas a ltima uefinio sei pieseivaua, e .n7 tei a
piopiieuaue background: red.
Less tambm no impeue ou uetecta uuplicao se seletoies foiem estenuiuos
mltiplas vezes. No teiceiio bloco abaixo,.mast-head estenue .head e .title,
mas como .head j estenuia .title, .mast-head sei copiauo uuas vezes:
.title {
color: black;
}

.head {
&:extend(.title);
}

.mast-head:extend(.head, .title) {}
Este o iesultauo:
.title, .head, .mast-head, .mast-head {
color: black;
}
Isto no alteia o funcionamento uo CSS, emboia seja uma uuplicao
uesnecessiia.
4.S seudo-e|ementos e var|ve|s
0m seletoi poue tei outias pseuuo-classes alm ue :extend , mas :extend tem
sempie que sei a _")*-(:
pre:nth-child(odd):extend(div span) {} // OK!
a:hover:extend(div):extend(section) {} // OK!
a:extend(div):hover {} // ILEGAL - causa erro no processador!
{less} {4:extenu }

S6
:extend poue sei anexauo a um seletoi iepiesentauo poi uma vaiivel
inteipolaua:
@var: .secao; @{var}:extend(div) {}
Nas :extend no supoita (at o Less 1.6) vaiiveis como aigumentos. Elas so
ignoiauas j que o piocessauoi no consegue achai o seletoi iepiesentauo pela
vaiivel. No mostiaua mensagem ue eiio e a falha ocoiie silenciosamente.
@var: .secao; div:extend(@{var}) {} // ISTO NAO FUNCIONA!
4.6 Correspondnc|a exata
Paia aplicai as extenses, :extend piecisa localizai seletoies que combinem com
os que foiam passauos como aigumentos. Poi 4%I(J"), essa coiiesponuncia
piecisa sei %?()(. A foima impoita. Bois seletoies uifeientes que tm o mesmo
efeito ou significauo em CSS. Poi exemplo p:before:hover e p:hover:before
$E# .E# !#$.*4%'(4#. *6J(*. paia :extend. A nica exceo conteuo entie
aspas em pieuicauos:
[nome=abc], [nome='abc'] e [nome="abc"]
so consiueiauos equivalentes.
Tipos ue expiesses com seletoies que so equivalentes em CSS mas no so
consiueiauas coiiesponuncias equivalentes em paimetios ue :extend
incluem:
Seletoies equivalentes que usam ou omitem o seletoi univeisal:
*.classe e .classe, *:before e :before ou |nome=abc] e *[nome=abc]
Seletoies com pseuuo-elementos equivalentes com oiuem uifeiente:
a:before:hover e a:hover:before
Seletoies uo tipo nth- equivalentes com aigumentos expiessos ue foima
textualmente uifeiente: a:nth-child(n+1), a:nth-child(1n+1), a:nth-
child(odd) e a:nth-child(n + 1)
Nesmo tenuo usanuo como aigumento quatio seletoies equivalentes, div no
sei estenuiuo nos blocos abaixo:
a:before:hover, p:nth-child(n + 1), *.secao, *[nome] {
}

div:extend(a:hover:before, p:nth-child(n+1), .secao, [nome]) {
color: purple;
}
{less} {4:extenu }

S7
e o iesultauo sei:
a:before:hover, p:nth-child(n + 1), *.secao, *[nome] {
}

div {
color: purple;
}
Nas se foi auicionauo um espao antes e outio uepois uo +, a combinao exata
ue p:nth-child(n + 1) sei suficiente paia fazei div apaiecei no piimeiio
bloco:
a:before:hover, p:nth-child(n+1), *.secao, *[nome], div {
}
div {
color: purple;
}
4.7 Correspondnc|a parc|a|
Se um seletoi uo tipo .a foi usauo como aigumento ue :extend, ele encontiai
coiiesponuncia apenas com seletoies iunticos .a. Seletoies c.a ou .a.b no
seio consiueiauos equivalentes.
0 seletoi .new-section abaixo no sei estenuiuo pois .sec no tem
coiiesponuncia %?()( com nenhum uos seletoies uo piimeiio bloco:
div.sec, .sec.subsec, .sec:before {
color: pink;
}

.new-section:extend(.sec) {}
Resultauo:
div.sec, .sec.subsec, .sec:before {
color: pink;
}
Nas Less ii aceitai essas coiiesponuncias se o aigumento ue :extend viei
seguiuo ua palavia all:
.new-section:extend(.sec all) {}
Assim ele vai geiai o CSS abaixo:
div.sec, .sec.subsec, .sec:before, div.new-section, .new-section.subsec,
.new-section:before {
color: pink;
}
{less} {4:extenu }

S8
4.8 Lscopo
0 escopo ue :extend vale paia toua a pgina e blocos aninhauos. Se foi usauo
uentio ue um bloco @media, ele so pouei estenuei seletoies ueclaiauos uentio
uo mesmo bloco ou em blocos aninhauos.
0 seletoi body:extend(.page) ii estenuei body em touos os blocos abaixo,
mas div:extend(.page) usauo uentio uo piimeiio bloco @media ii
estenuei div apenas no bloco .page contiuo no mesmo bloco @media:
.page {
font-size: 20px;
width: 100%;
height: 100%;
}

@media (min-width: 48rem) {
.page {
font-size: 18px;
}
div:extend(.page) {}
}

@media print {
.page {
font-size: 12px;
}
}

body:extend(.page) {};
Resultauo em CSS:
.page, body {
font-size: 20px;
width: 100%;
height: 100%;
}

@media (min-width: 48rem) {
.page, div, body {
font-size: 18px;
}
}

@media print {
.page, body {
font-size: 12px;
}
}
{less} {4:extenu }

S9
4.9 uando usar :extend
Com :extend poue-se evitai a ciiao ue uma classe no BTNL somente paia
aplicai piopiieuaues geiais que uevem sei usauas poi um giupo ue elementos.
Poi exemplo, suponha que voc tenha uma folha ue estilos que uefina um seletoi
paia posicionamento 4%I(J") centializauo (.abs) e outio paia constiuii
ietngulos 1uuxSu cinzas (.box) como mostiauo abaixo.
.abs {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
}
.box {
background-color: gray;
height: 50px;
width: 100px;
}
voc tem 9 divs uentio ue uma section e pietenue ienueiizai caua div como
um .box e posicionai ua foima abaixo:

Ento voc poue utilizai esta folha ue estilos:
@import url('abs-box.less');
@up: 50%;
@down: -@up;
@right: 50%;
@left: -@right;

section {
width: 450px;
height: 250px;
border: solid black 1px;
position: relative;
}

{less} {4:extenu }

4u
.top {
top: @up;
}
.bottom {
top: @down;
}
.left {
left: @left;
}
.right {
left: @right;
}
E aplicai as classes nos seus divs ue acoiuo com a posio uesejaua paia caua
ietngulo:
<section>
<div class="box abs top left"></div>
<div class="box abs top"></div>
<div class="box abs top right"></div>
<div class="box abs left" ></div>
<div class="box abs"></div>
<div class="box abs right"></div>
<div class="box abs bottom left" ></div>
<div class="box abs bottom"></div>
<div class="box abs bottom right"></div>
</section>
B muita iepetio uesnecessiia. Se caua classe .top, .right, etc. sempie vai
sei um .box e um .abs, pouemos heiuai os estilos uesses seletoies e evitai
iepetii "box abs" em caua classe.
Ento aciescentamos o bloco seguinte, estenuenuo com as piopiieuaues
ue .box e .abs os quatio seletoies ue posicionamento, e mais um com bloco
vazio que simplesmente heiua os estilos (.center):
.right, .top, .bottom, .left, .center {
&:extend(.abs, .box);
}
Com isto, no piecisamos mais iepetii as classes .box e .abs em caua div,
mantenuo apenas as classes ue posicionamento e ueixanuo o couigo mais limpo:
<section>
<div class="top left"></div>
<div class="top"></div>
<div class="top right"></div>
<div class="left" ></div>
<div class="center"></div>
<div class="right"></div>
<div class="bottom left" ></div>
<div class="bottom"></div>
<div class="bottom right"></div>
</section>
{less} {S:mixins }

41
{S: !"#"$! !
S.1 M|x|ns
vaiiveis peimitem aimazenai valoies. Nixins peimitem aimazenai conjuntos
inteiios ue iegias, que pouem sei ieusauas em outios blocos.
A ueclaiao ue um mixin no uifeie em naua ue uma ueclaiao ue um seletoi
CSS ue classe ou iu. A uifeiena que o mixin foi ciiauo paia sei usauo apenas na
folha ue estilos. Alm uisso, mixins pouem tei paimetios.
0 mixin abaixo agiupa viias iegias usauas em uifeientes sees ue um
uocumento:
.text-content-set {
padding: 2px;
margin: 0 2px 0 2px;
border: solid rgb(225,225,225);
background-color: rgb(128,128,128);
color: rgb(240,240,240);
}
Expiesso uesta foima, o CSS geiauo piaticamente o mesmo (talvez muue a
foima ue iepiesentao ue coies, uepenuenuo uo piocessauoi). 0 que faz esse
bloco um mixin a I#'-( como ele usauo. Agoia pouemos aplic-lo em viios
outios blocos, e evitai iepetii um monte ue ueclaiaes:
.section {
.text-content-set;
h1 {
color: #00008b;
}
}
#footer {
.text-content-set; // este o mixin
}
0 iesultauo sei:
{less} {S:mixins }

42
.text-content-set {
padding: 2px;
border: solid #e1e1e1;
background-color: #808080;
color: #f0f0f0;
}
.section {
padding: 2px;
color: #f0f0f0;
}
.section h1 {
color: #00008b;
}
#footer {
padding: 2px;
color: #f0f0f0;
}
Como no pietenuemos que o mixin seja usauo na pgina, pouemos ocult-lo na
geiao final uo CSS ueclaianuo-o com painteses:
.text-content-set() { ... }
Assim apenas os elementos que usam o mixin fazem paite uo CSS final:
.section {
padding: 2px;
color: #f0f0f0;
}
.section h1 {
color: #00008b;
}
#footer {
padding: 2px;
color: #f0f0f0;
}
E uma boa pitica sempie usai painteses na ueclaiao ue mixins, mesmo que
eles no tenham paimetios.
Nixins pouem tambm usai seletoies ue iu (#nome) em vez ue seletoies ue classe
(.nome). No faz nenhuma uifeiena, mas a conveno usai seletoies ue classes
paia mixins, e seletoies ue iu paia namespaces (que veiemos mais auiante).
{less} {S:mixins }

4S
S.2 M|x|ns com b|ocos an|nhados
Nixins pouem contei blocos aninhauos, poi exemplo:
.mixin1() {
.abc {
color: black;
}
.xyz {
color: gray;
}
}
Isto vai ciiai incluii .abc e .xyz no contexto ue qualquei seletoi que usai o mixin:
.container {
.mixin1();
}
Que iesulta no CSS:
.container .abc {
color: black;
}
.container .xyz {
color: gray;
}
Poue-se ciiai outios tipos ue ielacionamento entie seletoies, mas no
peimitiuo usai & antes ou uepois ua !0(-(4( a um mixin:
.container {
&.mixin1; // ILEGAL!
.mixin1 &; // ILEGAL!
}
No entanto, possivel usai o simbolo & uentio ue um mixin, peimitinuo que o
seletoi uo bloco exteino seja usauo como paimetio uentio uo mixin:
.mixin2() {
&.abc {
color: blue;
}
&.xyz {
color: navy;
}
}
Besta vez a chamaua:
.component {
.mixin2();
}
{less} {S:mixins }

44
ii passai o(s) seletoi(es) uo bloco onue o mixin foi chamauo como aigumento
no lugai uo &, auicionanuo um seletoi ue classe em caua um:
.component.abc {
color: blue;
}
.component.xyz {
color: navy;
}
S.3 !|mportant
A palavia-chave !important usaua em CSS paia sobiepoi as iegias ue
pieceuncia uo cascaue e foiai a aplicao ue uma ueclaiao ue estilo em um
seletoi. Se foi aplicaua em um mixin, touas as ueclaiaes ue estilo contiuas no
mixin iio sei maicauas como !important.
Consiueie o mixin abaixo:
.mask-circle() {
-webkit-mask-image: url(circle.svg);
-webkit-mask-origin: padding;
-webkit-mask-position: 450px 150px;
-webkit-transform: scale(2);
}
Se ele foi usauo uesta foima:
.photo {
border: none;
.mask-circle() !important;
}
Piouuzii este iesultauo em CSS:
.photo {
border: none;
-webkit-mask-image: url(circle.svg) !important;
-webkit-mask-origin: padding !important;
-webkit-mask-position: 450px 150px !important;
-webkit-transform: scale(2) !important;
}
S.4 M|x|ns com parmetros
Nixins pouem iecebei paimetios na foima ue vaiiveis com escopo limitauo ao
bloco. As vaiiveis tm seus valoies uefiniuos quanuo o mixin usauo. Este tipo
ue mixin muito bom paia ieusai uefinies com valoies uifeientes.
No exemplo abaixo, um mixin paia ieuimensionamento que iecebe tis
paimetios:
{less} {S:mixins }

4S
.scale-2D-2(@amount) {
-webkit-transform-origin: top left;
-webkit-transform: scale(@amount);
-moz-transform-origin: top left;
-moz-transform: scale(@amount);
-ms-transform-origin: top left;
-ms-transform: scale(@amount);
-o-transform-origin: top left;
-o-transform: scale(@amount);
transform-origin: top left;
transform: scale(@amount);
}
0 mixin acima poue sei usauo ua foima:
.image2 {
.scale-2D-2(.75);
}
e ii geiai o CSS abaixo:
.image2 {
-webkit-transform-origin: top left;
-webkit-transform: scale(0.75);
-moz-transform-origin: top left;
-moz-transform: scale(0.75);
-ms-transform-origin: top left;
-ms-transform: scale(0.75);
-o-transform-origin: top left;
-o-transform: scale(0.75);
transform-origin: top left;
transform: scale(0.75);
}
0m mixin poue tei mltiplos paimetios sepaiauos poi B#$)#1%1+j'6J"( (viigulas
tambm pouem sei usauas mas pouem causai pioblemas em alguns casos). 0s
paimetios so selecionauos pela sua posio.
.pular(@duration; @count) {
-webkit-animation-name: roteiro-pulo;
-webkit-animation-duration: @duration;
-webkit-animation-iteration-count: @count;
}
0so uo mixin:
.anim-pulando {
.pular(4s; 3);
}
Resultauo:
.anim-pulando {
-webkit-animation-name: roteiro-pulo;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
}
{less} {S:mixins }

46
Poue-se uefinii o mixin com um valoi 4%I(J") paia caua vaiivel, que sei usauo
caso os paimetios no sejam uefiniuos no uso.
No exemplo abaixo o segunuo paimetio uo mixin .pulo-vertical, @timing-
function possui um valoi 4%I(J") ease-out que sei usauo se o segunuo
paimetio no estivei piesente.
.pulo-vertical(@height; @timing-function: ease-out) {
-webkit-transform: translateY(@height);
-webkit-animation-timing-function: @timing-function;
}
0 mixin chamauo tis vezes. Na piimeiia e ltima o segunuo paimetio
omitiuo e o valoi 4%I(J") usauo.
@-webkit-keyframes roteiro-pulo {
0% {.pulo-vertical(100px);}
50% {.pulo-vertical(50px; ease-in);}
100% {.pulo-vertical(100px);}
}
Resultauo em CSS:
@-webkit-keyframes roteiro-pulo {
0% {
-webkit-transform: translateY(100px);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-animation-timing-function: ease-out;
}
}
Nixins tambm pouem tei paimetios iuentificauos poi nomes. 0s nomes
sobiepem a oiuem uos elementos. Isto peimite que mixins sejam chamauos
com -%$#. paimetios, j que os paimetios so *4%$)*I*!(4#..
0 mixin abaixo possui tis paimetios com valoies 4%I(J"):
.reflexo(@begin:left top; @end: left bottom; @final-color:white) {
-webkit-box-reflect:
below
10px
-webkit-gradient(linear, @begin, @end,
from(transparent),
color-stop(0.5, transparent),
to(@final-color));
}
{less} {S:mixins }

47
Poue-se chamai o mixin sem paimetios ou com menos ue tis paimetios,
uesue que os paimetios sejam os piimeiios. Paia chamai o mixin com apenas o
ltimo paimetio, pieciso iuentific-lo:
.image3 {
.reflexo(@final-color: black;);
}
Besta foima a oiuem uos paimetios no impoita. 0 iesultauo em CSS sei:
.image3 {
-webkit-box-reflect:
below
10px
-webkit-gradient(linear, left top, left bottom,
from(transparent),
color-stop(0.5, transparent),
to(#000000));
}
E uma boa pitica usai mixins com paimetios iuentificauos, j que so mais
legiveis.
S.S S|ntaxes a|ternat|vas (e prob|emt|cas)
0 Less tambm peimite que se use +j'6J"( paia sepaiai os paimetios, mas ele
se confunue quanuo os aigumentos passauos tambm contm viigulas.
Consiueie o mixin abaixo:
.font-mix(@family, @size: 10pt) {
font-family: @family;
font-size: @size;
}
Se ele foi chamauo uesta foima:
.section1 {
.font-mix('Times', 12pt);
}
0 compilauoi Less ii geiai o CSS abaixo, como espeiauo:
.section1 {
font-family: 'Times'; font-size: 12pt;
}
Como o segunuo aigumento possui um valoi 4%I(J"), possivel omiti-lo caso o
valoi ue 10pt seja uesejauo:
.section2 {
.font-mix('Times');
}
{less} {S:mixins }

48
E o iesultauo tambm sei o espeiauo:
.section2 {
font-family: 'Times';
font-size: 10pt;
}
Nas, e se o mixin foi chamauo com uma lista ue fontes.
.section3 {
.font-mix('Times', sans-serif);
}
0 compilauoi Less no vai ieclamai, no entanto vai geiai o CSS incoiieto:
.section3 {
font-family: 'Times';
font-size: sans-serif;
}
Se foiem passauos tis ou mais paimetios, o compilauoi no geia o CSS e exibe
uma mensagem ue eiio, mas se o nmeio ue paimetios foi compativel, no
acontece eiio e o CSS geiauo incoiietamente.
A soluo usai B#$)#1%1+j'6J"( paia sepaiai e teiminai os paimetios nas
chamauas. A chamaua uo mixin em .section3 acima poue sei coiiigiua
auicionanuo um B#$)#1%1+j'6J"( no final:
.section3 {
.font-mix('Times', sans-serif;);
}
0sanuo B#$)#1%1+j'6J"(, agoia poue-se passai mais paimetios ue fonte sem
causai eiio no compilauoi e obtenuo o iesultauo espeiauo:
.section4 {
.font-mix('Times', 'Times New Roman', sans-serif; 12pt;);
}
S.6 M|x|ns com nmero var|ve| de argumentos
0 nmeio ue paimetios aceitos no uso ue um mixin uepenue ue como ele foi
ueclaiauo. A tabela abaixo ilustia algumas situaes. 0s aigumentos @arg,
@arg1 e @argn iepiesentam vaiiveis quaisquei e ieticncias "777" (iepiesentauas
abaixo em caiacteies piopoicionais) significam zeio ou mais aigumentos.
Poi outio lauo, a vaiivel @arguments, a vaiivel ... (tis pontos, iepiesentauos
aqui em caiacteies fixos) e @+('*(+%"... (nome ue vaiivel seguiuo ue tis
pontos) so vaiiveis especiais uo Less que seio aboiuauas nesta seo.
{less} {S:mixins }

49
S|ntaxe usada na dec|araao do m|x|n
No.
args
Var|ve|s cr|adas
.mixin ou .mixin() u Nenhuma
.mixin(@arg)
1 @arg e @arguments
.mixin(@arg1; ... ; @argn)
n
@arg1, ..., @argn e
@arguments
.mixin(@arg: +("#')
u..1 @arg e @arguments
.mixin(@arg1: +("#'; ... ;@argn: +("#';)
u..n
@arg1, ..., @argn e
@arguments
.mixin(...)
u..* @arguments
.mixin(@arg; ...)
1..*
@arg e @arguments
.mixin(@arg1; ... ; @argn; ...)
n..*
@arg1, ..., @argn e
@arguments
.mixin(@arg: +("#'; ... )
u..*
@arg e @arguments
.mixin(@arg1; @arg2... )
1..*
@arg1 + @arg2 =
@arguments
Se o nmeio ue aigumentos passauos paia um mixin foi incompativel com o
nmeio espeiauo ue aigumentos (segunuo a tabela acima), o compilauoi Less
no ii geiai o CSS e exibii uma mensagem ue eiio. Nas no h veiificao ue
tipo ue uauos, poitanto se os aigumentos foiem enviauos na oiuem eiiaua, eles
seio atiibuiuos a vaiiveis incoiietas e no iio geiai o CSS espeiauo. Poi essa
iazo uma boa pitica usai aigumentos com nome, e valoies 4%I(J") nos mixins
com muitos aigumentos.
{less} {S:mixins }

Su
S.6.1 A var|ve| @arguments
@arguments uma vaiivel que existe em touos os mixins que aceitam
aigumentos, e contm )#4#. os aigumentos iecebiuos. Bentio uo mixin poue-se
tanto usai as vaiiveis inuiviuuais como touas juntas na oiuem em que foiam
iecebiuas. As vaiiveis ue @arguments pouem sei usauas em loops ou
uiietamente nas piopiieuaues. No CSS iesultante elas seio .%B('(4(. B#'
%.B(K#..
.borda (@estilo: solid; @cor: black; @espessura: 1px) {
border: @arguments;
background: lighter(@cor, 50%);
}
As uuas classes abaixo usam este mixin. A piimeiia no passa paimetios e usa
os valoies 4%I(J"). A segunua alteia apenas um paimetio:
.sec1 {
.borda();
}
.sec2 {
.borda(@cor: red);
}
Este o iesultauo em CSS:
.sec1 {
border: solid #000000 1px;
background: #808080;
}

.sec2 {
border: solid #ff0000 1px;
}
Este outio mixin pie-uefine viios aigumentos paia uma maigem, inicializauos
com um valoi uefault (2px):
.margem(@top: 2px; @right: 2px; @bottom: 2px; @right: 2px) {
margin: @arguments;
}
Ele poue sei chamauo sem aigumentos paia usai os valoies 4%I(J"), ou poue
escolhei qualquei um ou mais paimetios paia ieuefinii. 0 seletoi .sec3 abaixo
muuou apenas o teiceiio aigumento paia zeio:
.sec3 {
.margem(@bottom: 0);
}
0 mixin gaiante que a substituio em CSS ocoiiei no lugai coiieto:
{less} {S:mixins }

S1
.sec3 {
margin: 2px 2px 0 2px;
}
S.6.2 A var|ve| ... (trs pontos)
Nixins que iecebem um nmeio vaiivel ue aigumentos pouem sei ueclaiauos
com ieticncias (tis pontos) uentio uos painteses:
.padding-e-margem(...) {
margin:@arguments;
padding: @arguments;
}
A chamaua poue contei ue zeio a muitos aigumentos:
.sec4 {
.padding-e-margem(1;2);
}
0 CSS iesultante contm os aigumentos na oiuem em que foiam enviauos:
.sec4 {
margin: 1 2;
padding: 1 2;
}
0m pioblema uesse mixin que ele aceita que $E# sejam passauos aigumentos.
Se ele foi chamauo uesta foima:
.sec4 {
.padding-e-margem;
}
0 iesultauo sei um CSS incoiieto:
.sec4 {
margin: ;
padding: ;
}
Paia evitai isto, poue-se ueclaiai um ou mais paimetios e usai ... como _")*-#
aigumento. A vaiivel @arguments ii contei )#4#. os aigumentos, inclusive os
que tm vaiiveis ueclaiauas.
0 mixin abaixo gaiante que havei (# -%$#. J- aigumento vliuo:
.transmix(@transform: scale(1); ...) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-o-transform: @arguments;
-ms-transform: @arguments;
transform: @arguments;
}
Se foi chamauo sem aigumentos:
{less} {S:mixins }

S2
.sec5 {
.transmix;
}
ii piouuzii:
.sec5 {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Nas se foiem passauos aigumentos, eles teio pieceuncia:
.sec6 {
.transmix(scale(0.5); translate(3); rotateX(25deg));
}
Resultauo:
.sec6 {
-webkit-transform: scale(0.5) translate(3) rotateX(25deg);
-moz-transform: scale(0.5) translate(3) rotateX(25deg);
-o-transform: scale(0.5) translate(3) rotateX(25deg);
-ms-transform: scale(0.5) translate(3) rotateX(25deg);
transform: scale(0.5) translate(3) rotateX(25deg);
}
0 nmeio minimo ue aigumentos uefiniuo pelas vaiiveis explicitas antes uos
tis pontos. Caua uma iecebei o valoi passauo na posio coiiesponuente ou
pelo seu nome.
S.6.3 A var|ve| @!"#$...
@arguments sempie contm )#4#. os aigumentos. Nas possivel tei em um
mesmo mixin aigumentos "annimos" e ueclaiauos.
Se em vez ue ... como ltimo aigumento, o ltimo aigumento foi uma +('*<+%"
seguiua ue ... sem espao (@args..., poi exemplo), Less peimite que ela
ieceba um nmeio ilimitauo ue aigumentos seja atiibuiua a ela. Assim possivel
o acesso lista contenuo apenas os aigumentos que $E# foiam explicitamente
ueclaiauos em vaiiveis. Bentio uo mixin, a lista poue sei obtiua atiavs ue
iefeincia vaiivel ueclaiaua sem as ieticncias (poi exemplo @args).
0 mixin abaixo usa o piimeiio aigumento paia uefinii a piopiieuaue border. 0s
aigumentos iestantes (ilimitauos) so usauos paia uefinii margin:
.borda-com-margem(@borda; @outros-args...) {
.border: @borda;
margin: @outros-args;
}
{less} {S:mixins }

SS
Abaixo ele est senuo chamauo com cinco aigumentos:
.sec7 {
.borda-com-margem(solid black 1px; 5; 10; 15; 5;);
}
E o iesultauo em CSS sei:
.sec7 {
margin: 5 10 15 5;
}
S.7 Sobrecarga de m|x|ns
Nixins pouem tei nomes iguais e seiem selecionauos com base na kJ($)*4(4% 4%
('6J-%$)#. ueclaiauos.
.mancha(@alpha: 1){ // 0 ou 1 argumento
background: black;
color: white;
}

.mancha(@gray; @alpha: 1) { // 1 ou 2 argumentos
@yarg: 255 - @gray;
background: rgb(@gray,@gray,@gray);
color: rgb(@yarg, @yarg, @yarg);
}

.mancha(@red; @green; @blue; @alpha: 1) { // 3 ou 4 argumentos
@der : 255 - @red;
@neerg : 255 - @green;
@eulb : 255 - @blue;
background: rgb(@red, @green, @blue);
color: rgb(@der, @neerg, @eulb);
}
0s mixins seio executauos ue acoiuo com a coiiesponuncia uo nmeio ue
aigumentos com os que foiem passauos na chamaua. Se houvei ambiguiuaue, o
compilauoi no ii geiai o CSS e exibii uma mensagem ue eiio.
.sec3 {
.mancha; // chama o primeiro mixin
}
.sec4 {
.mancha(32;0.5) // chama o segundo mixin
}
.sec5 {
.mancha(128;64;32) // chama o terceiro mixin
}
Baveiia ambiguiuaue se o mixin fosse chamauo com apenas um aigumento, pois
o compilauoi no sabeiia uistinguii entie o piimeiio ou o segunuo, j que ambos
so compativeis com um aigumento.
{less} {S:mixins }

S4
Resultauo em CSS:
.sec3 {
background: black;
color: white;
}
.sec4 {
color: #dfdfdf;
}
.sec5 {
color: #7fbfdf;
}
Poue-se tambm selecionai mixins ue mesmo nome com B(']-%)'#. I*?#..
0s mixins .caixa() abaixo tm o piimeiio paimetio fixo que usauo paia
uistingui-los. 0 segunuo paimetio vaiivel e poue sei omitiuo. 0 ltimo
mixin .caixa() iecebe uois paimetios quaisquei, e o segunuo opcional.
Qualquei chamaua a mixins .caixa() com um ou uois aigumentos ii selecion-
los. Se a chamaua contivei no piimeiio aigumento algum uos paimetios fixos,
este tambm sei selecionauo e as piopiieuaues seio -*.)J'(4(. (sem
nenhuma gaiantia que no havei iepetio).
.caixa-base(@espessura: 1px; @cor:black) {
margin: @espessura;
padding: @espessura;
border: solid @cor @espessura;
}

.caixa(grande; @cor:black) {
.caixa-base(4px; @cor);
}

.caixa(media; @cor:black) {
}

.caixa(pequena; @cor:black) {
}

.caixa(zero; @cor:black) {
.caixa-base(0; @cor);
}

.caixa(@todas; @todas: xyz) {
position: absolute;
top: 0; left: 0;
}
Poue-se ento selecionai o mixin usanuo o nome uo aigumento fixo como
paimetio.

{less} {S:mixins }

SS
.sec2 {
.caixa(pequena;red);
}
Alm uo mixin que contm o piimeiio aigumento "pequena", a chamaua acima
ii executai )(-8Y- o mixin
.caixa(@todas, @todas: xyz)
que combina com kJ("kJ%' !0(-(4( 4% J- #J 4#*. ('6J-%$)#..
0 iesultauo sei o CSS abaixo:
.sec2 {
margin: 1px;
padding: 1px;
border: solid #ff0000 1px;
position: absolute;
top: 0;
left: 0;
}
Se os mixins ficaiem em um uocumento global impoitauo poi outios
uocumentos locais, o paimetio fixo poue sei aimazenauo em uma vaiivel e sei
uefiniuo em um nico lugai no uocumento:
@import url(mixins-11-matching.less);
@tipo-caixa: grande; // tamanho default para esta folha de estilos

.sec1 {
.caixa(@tipo-caixa);
}
Resultauo em CSS:
.sec1 {
margin: 4px;
padding: 4px;
position: absolute;
top: 0;
left: 0;
}
S.8 M|x|ns para CSS mu|t|-browser
Nixins so otimos paia encapsulai piopiieuaues uepenuentes ue biowsei. Essas
piopiieuaues tm um piefixo piopiietiio e geialmente iecebem os mesmos
uauos. E possivel encapsulai em um mixin as piopiieuaues ielativas a uiveisos
fabiicantes uifeientes, e chamai a piopiieuaue pelo nome uo mixin.
0 mixin abaixo geia a piopiieuaue uo CSSS )'($.I#'- com um nmeio minimo
ue aigumentos paia quatio biowseis uifeientes:
{less} {S:mixins }

S6
.transform(@transform:scale(1); ...) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-o-transform: @arguments;
-ms-transform: @arguments;
transform: @arguments;
}
Exemplo ue uso:
.secao {
.transform(
rotate(45deg);
scale(0.5);
translate(100px,100px);
skewY(10deg);
)
}
Resultauo ua geiao uo CSS:
.secao {
-webkit-transform: rotate(45deg) scale(0.5) translate(100px, 100px) skewY(10deg);
-moz-transform: rotate(45deg) scale(0.5) translate(100px, 100px) skewY(10deg);
-o-transform: rotate(45deg) scale(0.5) translate(100px, 100px) skewY(10deg);
-ms-transform: rotate(45deg) scale(0.5) translate(100px, 100px) skewY(10deg);
transform: rotate(45deg) scale(0.5) translate(100px, 100px) skewY(10deg);
}
S.9 M|x|ns que retornam va|ores
vaiiveis uefiniuas no coipo ue mixins tm seu escopo piopagauo no bloco que
faz a chamaua, ou seja, os valoies uessas vaiiveis pouem sei liuas no bloco
uestino.
Poi exemplo, o mixin abaixo uefine sete vaiiveis. Quatio como paimetios e
quatio no coipo uo mixin.
.mancha(@red; @green; @blue; @alpha: 1) { // 3 ou 4 argumentos
@der : 255 - @red;
@neerg : 255 - @green;
@eulb : 255 - @blue;
@opacity: @alpha;
background: rgb(@red, @green, @blue);
color: rgb(@der, @neerg, @eulb);
}
As quatio vaiiveis que foiam ueclaiauas no coipo so +*.j+%*. no bloco que
chama o mixin. 0 seletoi abaixo utiliza @opacity e @neerg:
.sec8 {
.mancha(255,128,64);
opacity: @opacity;
border-color: @neerg;
}
{less} {S:mixins }

S7
Resultauo em CSS:
.sec8 {
background: #ff8040;
color: #007fbf;
opacity: 1;
border-color: 127;
}
As vaiiveis uentio ue mixins pouem sei usauas paia tiansfoimai os valoies
iecebiuos. Assim o mixin se compoita como uma IJ$KE#.
D?%-B"#: uois mixins paia conveiso ue cooiuenauas caitesianas e polaies:
.polar(@x, @y) {
@r: sqrt(@x*@x + @y*@y);
@theta: convert(atan(@y / @x), deg);
}

.cartesian(@r, @theta) {
@x: @r * cos(@theta);
@y: @r * sin(@theta);
}
0sanuo os mixins paia fazei conveises:
.sec6:before {
.polar(3, 4);
content: 'r: @{r} theta: @{theta}';
}

.sec7:before {
.cartesian(5, convert(53.13010235deg, rad));
content: 'x: @{x} y: @{y}';
}
Resultauo em CSS:
.sec6:before {
content: 'r: 5 theta: 53.13010235415598deg';
}

.sec7:before {
content: 'x: 3.0000000002901417 y: 3.9999999997823936';
}
Estes mixins utilizam funes matemticas e ue conveiso que fazem paite uo
Less e seio aboiuauas mais auiante.
S.10 M|x|ns com :extend
0 pseuuo-elemento :extend poue sei usauo uentio ue mixins, peimitinuo que o
mixin estenua os seletoies uo bloco onue ueclaiauo com piopiieuaues ue
outios seletoies. Poi exemplo:
{less} {S:mixins }

S8
.label:before > input:hover {
content: 'hovering';
}

.list-style() {
&:extend(.label:before > input:hover);
}
A chamaua uo mixin estenue os seletoies uo bloco onue usauo com as
piopiieuaues uos seletoies coiiesponuentes:
.menu-item, .nav-item {
.list-style();
}
Resultauo em CSS:
.label:before > input:hover, .menu-item, .nav-item {
content: 'hovering';
}
S.11 Agregao de va|ores
Less peimite que valoies ue piopiieuaues uefiniuas em um mixin
sejam (6'%6(4(. aos valoies existentes ue piopiieuaues uos seletoies onue o
mixin usauo, em uma "*.)( .%B('(4( B#' +j'6J"(.. Isto til paia piopiieuaues
que aceitam valoies sepaiauos poi viigulas como font-family e outios.
Paia usai, necessiio incluii um sinal + tanto na piopiieuaue ueclaiaua no
mixin, quanto na piopiieuaue ueclaiaua no seletoi afetauo.
Poi exemplo, o mixin abaixo uefine uma tiansio multi-platafoima sobie a
piopiieuaue transform uo CSSS:
.transform-transition(@arg) {
@duration: @arg;

-webkit-transition-property+: -webkit-transform,
-moz-transform,
transform;
-webkit-transition-duration+: @duration, @duration, @duration;
}
Aqui ele usauo como base paia (4*!*#$(' mais um atiibuto tiansio:
.secao1 {
.transform-transition(2s);
-webkit-transition-property+: opacity;
-webkit-transition-duration+: @duration;
}
0 iesultauo em CSS aciescenta os atiibutos auicionauos no fim ua lista sepaiaua
poi viigulas:
{less} {S:mixins }

S9
.secao1 {
-webkit-transition-property: -webkit-transform,
-moz-transform,
transform,
opacity;
-webkit-transition-duration: 2s, 2s, 2s, 2s;
}
{less} {6:opeiaes e funes }

6u
{6: !"#$%&'#( #
!"#$%&' )
Neste capitulo seio exploiauos iecuisos uo Less que peimitem iealizai
opeiaes matemticas e ue tiansfoimao ue uauos, opeiaes conuicionais e
loops.
6.1 Cperaes ar|tmt|cas
Less peimite iealizai opeiaes matemticas entie valoies numiicos e coies,
levanuo em conta as uniuaues em que so ueclaiauas e fazenuo conveiso
automtica quanuo possivel.
As expiesses geiam CSS %.)<)*!#, que uifeie ua funo calc() uo CSSS (que
tambm capaz ue iealizai opeiaes matemticas), ou uas opeiaes em
}avaSciipt que pouem opeiai uinamicamente. Less noimalmente no tem acesso
estiutuia B0N ua pgina que ii iecebei o estilo ( possivel fazei isto com Less
senuo piocessauo no biowsei). Noimalmente Less apenas um piocessauoi
que 6%'( CSS esttico, poitanto toua a matemtica ii seivii paia geiai um stiing
esttico. Ainua assim bastante til paia iealizai alinhamentos,
uimensionamento, manipulao ue coies, tempoiizao ue animaes,
uistiibuio ue giauientes, calculo uo tamanho ue fontes, etc.
As expiesses pouem sei usauas uiietamente na atiibuio ue valoies a
piopiieuaues, na uefinio ue vaiiveis e pouem incluii outias vaiiveis. Paia
evitai ambigiuaues, iecomenuvel escievei as expiesses entie painteses e
ue piefeincia iealiz-las em vaiiveis. Esta iecomenuao tambm gaiantii o
funcionamento em veises futuias ue Less.

61
0s opeiauoies que pouem sei usauos em expiesses matemticas so os
mesmos opeiauoies bsicos encontiauos nas linguagens ue piogiamao:
* multiplicao
/ uiviso
+ soma
- subtiao
0 exemplo abaixo ilustia o uso uesses opeiauoies:
@parte1: 10px;
@parte2: 20px;
@borda: 2px;
@margem: (((@parte1 + @parte2) / (2 * @borda)) - 0.5);

.sec1 {
margin: @margem @margem;
color: (#777 + #333);
width: 100% / 4;
}
0 iesultauo uo piocessamento uo couigo acima em CSS :
.sec1 {
margin: 7px 7px;
color: #AAAAAA;
width: 25%;
}
As opeiaes tambm tm a mesma pieceuncia uas linguagens ue
piogiamao: calculauos ua esqueiua paia a uiieita, mas com multiplicao,
iesto e uiviso tenuo piioiiuaue sobie auio e subtiao. A pieceuncia poue
sei alteiaua com o uso ue painteses. Removenuo os painteses uo exemplo
acima, o iesultauo outio:
@margem: (@parte1 + @parte2 / 2 * @borda - 0.5);
Resultauo:
.sec1 {
margin: 29.5px 29.5px;
}
Eiios ue matemtica $E# .E# 4%)%!)(4#. pelo pi-piocessauoi Less. A uiviso poi
zeio, poi exemplo, iesulta em Infinity (um tipo ue uauos uo }avaSciipt). 0utios
pouem geiai CSS incoiieto, como poi exemplo tamanhos ue fonte negativas ou
NaN ("Not a Numbei" outio tipo ue uauos uo }avaSciipt). 0 couigo Less abaixo:
.sec3 {
@tam: (@parte2 - 2 * @parte1);
font-size: (12pt - @parte2);
margin: @tam / @parte2 @parte2 / @tam - @parte1;
}

62
Resulta neste CSS incoiieto:
.sec3 {
font-size: -8pt; margin: 0px Infinitypx;
}
6.2 Cperaes usando un|dades
0peiaes aiitmticas pouem usai e geialmente utilizam uniuaues. Se em uma
expiesso matemtica nenhum uos nmeios tivei uma uniuaue, o iesultauo final
sei mantiuo sem uniuaue:
.sec4 {
font-size: 4 + 2 + 16;
}
CSS:
.sec4 {
font-size: 22;
}
Se um uos teimos possuii uma uniuaue, essa uniuaue sei usaua no iesultauo
final:
.sec5 {
font-size: 4 + 2px + 16;
}
.sec5 {
font-size: 22px;
}
Se os nmeios ue uma expiesso tiveiem mais ue uma uniuaue, e as uniuaues
foiem uifeientes, elas poueio sei conveitiuas automaticamente .% I#'%-
!#-B()j+%*. e .% (. #B%'(KL%. I#'%- 4% .#-( (+) % .J8)'(KE# (-). A B'*-%*'(
uniuaue usaua na expiesso sei a uniuaue uo nmeio iesultante. A tabela
abaixo lista os giupos compativeis:
Unidades Tipo
px, m, cm, mm, in, pt, px Compiimentos
s, ms Tempo
deg, rad, grad, turn ngulos

6S
0niuaues uo CSS no listauas na tabela acima (px, em, rem, etc.) $E# B#4%- .%'
-*.)J'(4(.. Pouem sei usauas em expiesses contenuo nmeios ua mesma
uniuaue ou com nmeios sem uniuaue.
0bseive o efeito ua conveiso automtica ue uniuaues nas expiesses abaixo.
.sec6 {
padding: (1cm + 1mm) (1mm + 1cm) (1pt + 1pc) (1m + 1in);
duration: (2s + 2ms);
margin: (1px + 1rem); // incompatveis
transform: rotate(1deg + 1rad) rotate(1rad + 1deg)
rotate(1deg + 1grad) rotate(1deg + 1turn);
}
E o CSS iesultante:
.sec6 {
padding: 1.1cm 11mm 13pt 1.0254m;
duration: 2.002s;
margin: 2px;
transform: rotate(58.29577951deg) rotate(1.01745329rad)
rotate(1.9deg) rotate(361deg); }
0utias combinaes piouuziio iesultauos incoiietos e uevem sei evitauas. Se
foiem iealizauas opeiaes entie giupos no compativeis, ou opeiaes ue
multiplicao ou uiviso envolvenuo nmeios com uniuaues uifeientes, os
valoies seio multiplicauos .%- !#$.*4%'(' (. J$*4(4%., e a uniuaue geiaua no
final poue sei tanto a piimeiia (em uiviso) como a ltima (em multiplicao).
.calculos-incorretos {
duration: (2s * 2ms);
margin: (1px + 1em) (1em + 1rem) (1mm * 1cm) (1m / 100cm);
transform: rotate(3turn / 1080deg) rotate(360deg * 3turn);
}
CSS contenuo iesultauos incoiietos:
.calculos-incorretos {
duration: 4ms;
margin: 2px 2em 1cm 0.01m;
transform: rotate(0.00277778turn) rotate(1080deg);
}
6.3 Arredondamento e percentagem
A tabela abaixo ielaciona as funes ceil() (teto), floor() (piso) e round()
(aiieuonua) que eliminam a paite uecimal ue um nmeio ue ponto-flutuante
segunuo uifeientes ciitiios, alm ue percentage() que conveite o valoi em
peicentagem.

64
Funo Recebe Retorna
ceil(n)
nmeio Pioximo inteiio. ceil(S.1) geia 6
floor(n)
nmeio Inteiio anteiioi. flooi(S.9) geia S
round(n)
nmeio Inteiio aiieuonuauo.
iounu(S.4) geia S, iounu(S.S) geia 6.
percentage(n)
nmeio Nmeio multiplicauo poi 1uu + uniuaue
Exemplo:
.secao {
margin: ceil(5.2px) floor(5.7px) round(5.5px) round(5.4px);
width: percentage(0.5);
}
CSS:
.secao {
margin: 6px 5px 6px 5px;
width: 50%;
}
6.4 Converso de un|dades
Nem sempie possivel ou iecomenuauo usai tiansfoimao automtica ue
uniuaues. s vezes uesejvel aciescentai uma uniuaue em um nmeio apos a
iealizao ue clculos, ou ainua tiocai a uniuaue sem fazei conveiso. Buas
funes seivem a esse pioposito:
Funo Recebe Retorna
convert(n, u)
n = nmeio (com ou sem
uniuaue),
u = uniuaue compativel
Nmeio conveitiuo na nova
uniuaue:
convert(1in, cm)geia 2.54cm
unit(n, u)
n = nmeio (com ou sem
uniuaue),
u = uniuaue
Nmeio iecebiuo qualificauo
com a uniuaue passaua como
paimetio.
unit(1in, cm) geia 1cm

6S
Se as uniuaues passauas paia convert() no foiem compativeis ele funcionai
igual a unit() simplesmente copianuo o mesmo valoi e tiocanuo a uniuaue. A
funo convert() $E# .JB#')( pixels (px), em ou rem.
0s exemplos abaixo ilustiam o uso uas funes convert() e unit() em viias
situaes e compaiauas conveises automticas incoiietas em expiesses:
@height: 2cm;
@width: 10px;
@length: 2in;

.secao {
margin: (@width / @height) unit(@width / @height, cm);
padding: (@height * @length) (@height * convert(@length, cm));
font-size: convert(1in, cm);
duration: unit(floor(100 * 12 / 142), s);
}
Resultauo em CSS:
.secao {
margin: 5px 5cm;
padding: 4cm 10.16cm;
font-size: 2.54cm;
duration: 8s;
}
6.S Iunes matemt|cas e tr|gonomtr|cas
Less possui viias funes matemticas e tiigonomtiicas que so teis paia
calculai valoies usauos em alinhamentos, paimetios paia animaes 2B e SB,
tiansies, conveiso ue cooiuenauas, mtiicas ue fontes, filtiagem e
composio ue coies, etc. evitanuo a necessiuaue ue usai }avaSciipt quanuo
piecisa-se apenas ue valoies estticos.
As funes esto ielacionauas na tabela abaixo.
0s valoies passauos pouem sei nmeios, vaiiveis que contenham nmeios ou
outias funes que ietoinem nmeios.
A uniuaue 4%I(J") paia ngulos iauianos (rad) a uniuaue uos valoies
ietoinauos pelas funes tiigonomtiicas. Nas na chamaua ue funes, os
paimetios pouem sei qualificauos com uma uniuaue. Se os valoies ietoinauos
foiem compiimentos eles seio nmeios (sem uniuaues).
Funo Recebe Retorna
sin(a)
ngulo seno uo ngulo
asin(c)
compiimento ngulo (inveiso uo seno )

66
Funo Recebe Retorna
cos(a)
ngulo cosseno uo ngulo
acos(c)
compiimento ngulo (inveiso uo cosseno)
tan(a)
ngulo tangente uo ngulo
atan(c)
compiimento ngulo (inveiso ua tangente)
pi()
S.141S926S
pow(n,p)
n = nmeio, p = potncia nmeio elevauo potncia
sqrt(n)
nmeio iaiz quauiaua
mod(n,d)
n = nominauoi, d = uenominauoi mouulo (iesto)
abs(n)
nmeio valoi absoluto
veja alguns exemplos.
ngulos e aicos:
#senos {
transform: translateY(sin(45deg)) rotate(convert(asin(0.5px), deg));
}

#co-senos {
transform: translateX(cos(45deg)) rotate(convert(acos(0.5px), deg));
}

#tangentes {
transform: skewX(tan(45deg)) rotate(convert(atan(1px), deg));
}
Resultauo em CSS:
#senos {
transform: translateY(0.70710678) rotate(30deg);
}

#co-senos {
transform: translateX(0.70710678) rotate(60deg);
}

#tangentes {
transform: skewX(1) rotate(45deg);
}
0m mixin que calcula ieas e ciicunfeincias:
.circle-mixin(@radius, @x, @y) {
@area: pi() * pow(@radius, 2);
@circunference: 2 * pi() * @radius;
}

67

#trigonometria {
.circle-mixin(5, 0, 0);
transform: rotate(acos(0.5px)*180deg/pi());
content: 'area: @{area} circunference: @{circunference}';
}
CSS:
#trigonometria {
transform: rotate(60deg);
content: 'area: 78.53981633974483 circunference: 31.41592653589793';
}
Clculo ue potncia, iaiz quauiaua, iestos, nmeios absolutos:
#quadrados {
margin: pow(5px,2);
padding:sqrt(25cm);
}
#modulos {
length: mod(11px,3);
width: abs(-10cm);
@component: pow(2,7); // 50%
color: rgb(@component,@component,@component);
}
CSS:
#quadrados {
margin: 25px;
padding: 5cm;
}
#modulos {
length: 2px;
width: 10cm;
color: #808080;
}
6.6 Iunes que operam sobre co|ees
Less possui algumas funes que opeiam sobie "*.)(.. 0ma lista um conjunto ue
valoies sepaiaua poi viigulas ou espaos. Nuitas piopiieuaues uo CSS e
seletoies pouem sei tiatauos como listas, e elas pouem sei usauas em loops.
Funo Recebe Retorna
length(a)
a = lista ue valoies o nmeio ue elementos ua
lista
extract(a, p)
a = lista ue valoies,
p = posio
o valoi ua lista contiuo na
posio infoimaua

68
Funo Recebe Retorna
min(c)
c = lista ue nmeios
sepaiaua poi viigulas
o menoi nmeio ua lista
max(c)
c = lista ue nmeios
sepaiaua poi viigulas
o maioi nmeio ua lista
0 exemplo abaixo ilustia o uso ue viias funes listauas acima:
@comp: 255 127 64;
@tamanhos: 36pt 24pt 18pt 16pt 12pt 10pt;
@fontes: 'Garamond', 'Times New Roman', Times, serif;
@steps: 0% 20% 40% 60% 80% 100%;

.paragrafo {
font-size: min(@tamanhos);
duration: unit(length(@steps), s);
font-family: @fontes;
}
.titulo {
font-size: max(@tamanhos);
color: rgb(extract(@comp,1), extract(@comp, 2), extract(@comp, 3));
font-family: extract(@fontes, 1), extract(@fontes, length(@fontes));
}
Resultauo em CSS:
.paragrafo {
font-size: 10pt;
duration: 6s;
font-family: 'Garamond', 'Times New Roman', Times, serif;
}
.titulo {
font-size: 36pt;
color: #ff7f40;
font-family: 'Garamond', serif;
}
6.7 1ransformao e formatao de texto
Less ofeiece algumas funes que auxiliam na constiuo ue stiings ue texto
foimatauo e conveiso ue texto em nmeios, coies, uils, etc. Atiavs ueles
possivel supiimii viias limitaes uo Less e geiai CSS liteialmente.
Suponha que temos as seguintes vaiiveis:
@image-name: 'pattern 5.png';
@docroot: 'http://www.test.com/app';
E queiemos us-las paia constiuii o valoi ue uma piopiieuaue background ua
foima:

69
background: url(http://www.test.com/app/images/pattern%205.png);
Poueiiamos tentai concatenai as vaiiveis assim:
.sec8 {
background: url(@docroot '/images/' @image-name);
}
Nas o piocessauoi Less ieclama e no peimite. Piecisamos usai inteipolao ue
vaiiveis e coloc-las uentio uo stiing:
.sec8 {
background: url('@{docroot}/images/@{image-name}');
}
Com isto obtemos o iesultauo:
.sec8 {
background: url('http://www.test.com/app/images/pattern 5.png');
}
que no exatamente o que queiemos. Piecisamos conveitei o espao no nome
uo aiquivo em %20 e iemovei as aspas.
A iemoo uas aspas poue sei feita com a funo e() ou pelo opeiauoi ~. So
sinnimos. Tanto faz usai um como outio. Esta funo conveite o stiing iecebiuo
em uma iepiesentao nativa, que na pitica significa iemovei as aspas uo
iesultauo final geiauo em CSS: A conveiso poue sei feita ua foima abaixo:
.sec8 {
background: e('url(@{docroot}/images/@{image-name})');
}
ou
.sec8 {
background: url(~'@{docroot}/images/@{image-name}');
}
0 opeiauoi ~ mais veistil j que a funo e() no aceita em qualquei lugai.
0 iesultauo paia qualquei uma uas alteinativas acima a mesma:
.sec8 {
background: url(http://www.test.com/app/images/pattern 5.png);
}
Ainua falta conveitei o espao uo nome ua imagem no foimato J'"1%$!#4%4: %20.
Isto poue sei feito com a funo escape, que iequei um stiing:
.sec8 {
@image-escaped: escape(@image-name);
background: url(~'@{docroot}/images/@{image-escaped}');
}

7u
0 iesultauo final :
.sec8 {
background: url(http://www.test.com/app/images/pattern%205.png);
}
B outias foimas ue obtei o mesmo iesultauo.
Na tabela abaixo esto listauas as funes e opeiauoies ue manipulao ue stiing
uisponiveis em Less:

Funo ou
operador
O que recebe O que faz
e('s') ou ~'s'

's' = stiing Conveite stiing em iepiesentao nativa uo
CSS (iemove as aspas uo CSS geiauo).
Quaisquei vaiiveis inteipolauas uentio uo
stiing so piocessauas.
Sem o uso ueste opeiauoi, o iesultauo em
CSS mantm as aspas.
D?%-B"#:
~"12px" ou~'12px' ou e("12px")
iesulta em CSS contenuo
12px
escape('s')

's' = stiing Couifica stiing em foimato J'"1%$!#4%4, que
atiibui couigos unicoue no foimato %hh paia
caiacteies que so ieseivauos em 0RLs,
onue h um uigito hexauecimal entie 0 e f.
0RL-encouing $E# substitui:
,, /,?, @, &, +, ', ~, !, $.
D?%-B"#:
encode('So Paulo')
geia
S%C3%A3o%20Paulo

71
Funo ou
operador
O que recebe O que faz
%('s', args...)

's' = stiing com
paimetios ue
substituio,
args... = valoies ue
substituio
%a,%A, %s, %S,%d, %D
Peimite a ciiao ue stiings foimatauos com
paimetios ue substituio (uma veiso
ultia-simplificaua uo printf uo C).
0s paimetios ue substituio maisculos
fazem escape() automtico.
%a%A e%d%D so equivalentes (Less 1.7)
mas %s%S ietoinam undefined se o valoi
foi uma coi.
D?%-B"#:
%(~'url(%a) url(%A)', a b, a b)
geia
url(a b) url(a%20b)
replace(s1, p, s2, f)

s1 = stiing,
p = iegexp,
s2 = substituio,
f = flags
Substitui um pauio ue expiesso iegulai
(p) encontiauo em um stiing (s1) poi outio
(s2) com flags opcionais (g = global, i =
ignoie case).
D?%-B"#:
replace(~"w.a.b", "a\.b", "x.k")
geia
w.x.k
color('s')

s = stiing contenuo
a iepiesentao ue
uma coi
Retoina uma coi (sem as aspas). D?%-B"#.:
color('#ff0000') geia #ff0000
color('red') geia #ff0000.
E possivel obtei o mesmo iesultauo usanuo a
funo e() ou o opeiauoi ~:
~'#ff0000' geia #ff0000

72
Nais exemplos usanuo %():
@estilo: italic;
@peso: 900;
@mintam: 10;
@maxtam: 36;
@fam: Arial, Helvetica, sans-serif;
@image-name: 'patt 5.png';
@docroot: 'http://www.test.com/app';

.sec7 {
font: %(~"%d %d %dpt/%dpt %d",@estilo,@peso,@mintam,@maxtam,@fam);
background: %(~"url(%d/images?name=%D)", @docroot, @image-name);
}
CSS:
.sec7 {
font: italic 900 10pt/36pt Arial, Helvetica, sans-serif;
background:url('http://www.test.com/app'/images?name='patt%205.png');
}
Nais exemplos usanuo replace():
@old-url: ~"url(http://abc.com/logo-ABC.COM.jpg)";
.sec9 {
background: replace(@old-url, "abc\.com", "xyz.com.br", "gi");
}
CSS:
.sec9 {
background: url(http://xyz.com.br/logo-xyz.com.br.jpg);
}
6.8 S|ntaxes prob|emt|cas
vimos que o uso ue expiesses aiitmticas usanuo uniuaues incompativeis (ou
expiesses ue uiviso e multiplicao com uniuaues uifeientes) geiam
iesultauos incoiietos e uevem, poitanto, sei evitauos. 0utios pioblemas suigem
na ambigiuaue ueviuo ao significauo uuplo ua 8(''( / e uo %.B(K#. Alguns
uesses pioblemas pouem sei iesolviuos com o uso ue painteses.
0 tiecho ue couigo abaixo inclui viias piopiieuaues que necessitam pieseivai a
8(''( no CSS. 0 Less iuentifica essas piopiieuaues e no iealiza a opeiao,
copianuo os valoies intactos paia o CSS:
@media screen and (aspect-ratio: 16/9) and (min-height: 960px/2 ) {
.section {
margin-top: 16/10;
font: 12pt/36pt;
font-size: 12pt/36pt;
}
}

7S
0 compilauoi Less geia o CSS abaixo paia o couigo acima:
@media screen and (aspect-ratio: 16/9) and (min-height: 960px/2) {
.section {
margin-top: 1.6;
font: 12pt/36pt;
font-size: 0.33333333pt;
}
}
0bseive que o aspect-ratio no foi tiatauo como uma uiviso, coiietamente,
mas o min-height tambm no, emboia o valoi aceito poi ele seja nmeio.
Bentio uo bloco .section a piopiieuaue margin-top teve o valoi 161u
tiansfoimauo em 1.6, font-size uiviuiu 12pt poi 36pt mas font, que aceita no
CSS o valoi 12pt/36pt no iealizou a uiviso.
E se voc iealmente quisesse iealizai a opeiao ue uiviso em aspect-
ratio e font. E tambm a subtiao ue min-height. Neste caso, basta envolvei
a expiesso entie painteses que o Less ii entenuei que ela ueve sei tiataua
como expiesso matemtica:
@media screen and (aspect-ratio: (16/9)) and (min-height: (960px/2) ) {
.section {
margin-top: 16/10;
font: (12pt/36pt);
font-size: 12pt/36pt;
}
}
E agoia o iesultauo uo CSS :
@media screen and (aspect-ratio: 1.77777778) and (min-height: 480px) {
.section {
margin-top: 1.6;
font: 0.33333333pt;
font-size: 0.33333333pt;
}
}
Quanto ao significauo uo espao ele tambm poue sei iesolviuo mas no com
painteses. E pieciso usai uma notao que no seja ambigua. Se um valoi ue
piopiieuaue aceita quatio nmeios sepaiauos poi espaos, o Less so ii tiatai os
valoies como expiesso matemtica .% $E# 0#J+%' #J)'( I#'-( 4% *$)%'B'%)(' #.
4(4#.. veja o iesultauo uos valoies ue margin e padding abaixo:
header, footer {
padding: -5 -10 +5 -20;
margin: -5 - 10 +5- 20;
}
0s valoies ue padding pouem sei inteipietauos como quatio valoies, ento Less
ii tiat-los assim. } os valoies ue margin no pouem sei tiatauos como valoies,

74
pois um - no vale como valoi, e +5- ilegal, mas ainua possivel encontiai 4#*.
valoies, ento o iesultauo :
header, footer {
padding: -5 -10 5 -20;
margin: -15 -15;
}
Se a inteno foi a iealizao ua expiesso aiitmtica, o sinal negativo no poue
estai junto uo nmeio se houvei um espao antes. Tem que ficai claio que uma
expiesso:
header, footer {
padding: -5 - 10 + 5 - 20;
margin: -5-10+5-20;
}
Resultauo em CSS:
header, footer {
padding: -30;
margin: -30;
}

{less} {7:loops.guaius }

7S
{7: !""#$%&'()*$ ,
Neste capitulo seio exploiauos iecuisos uo Less que peimitem iealizai
opeiaes conuicionais e loops.
7.1 M|x|ns cond|c|ona|s (m|x|n guards)
Poue-se ciiai mixins paiametiizauos que uefinem iegias ue estilo ue acoiuo com
opeiaes conuicionais iealizauas sobie os valoies iecebiuos. So chamauos
ue -*?*$ 6J('4.. Atiavs ueles possivel tomai uecises ue foima similai a
expiesses *I e *Ig%".% existentes em linguagens ue piogiamao.
A expiesso conuicional iepiesentaua poi um )%.)% seguinuo a palavia-
chave when ('quanuo'). Assim poue-se iepiesentai expiesses uo tipo uefina o
mixin x kJ($4# a expiesso y foi veiuaueiia usanuo a seguinte sintaxe:
.mixin(@parametros) when (condio sobre @parametros) {
regras;
}
veja um exemplo:
.page (@fundo) when (@fundo = black) {
background: @fundo;
color: white;
}
.page (@fundo) when (@fundo = white) {
background: @fundo;
color: black;
}
0so uo mixin conuicional:
.noite {
.page(rgb(0,0,0));
}
.dia {
.page(rgb(255,255,255));
}

76
Resultauo em CSS:
.noite {
color: white;
}
.dia {
color: black;
}
vale lembiai que os mixins conuicionais geiam &// %.)<)*!#. Em Web sites
iesponsivos muitas vezes o que se ueseja um compoitamento uinmico.
0sanuo -%4*( kJ%'*%. possivel contiolai o efeito uo CSS em uifeientes
uispositivos, iesolues e uimenses ue tela. Poitanto, um mixin conuicional
como:
.skin(@width) when (@width >= 500px) {
column-count:2;
}
.skin(@width) when (@width < 500px) {
column-count:1;
}
que B('%!% sei vaiivel, na veiuaue aplicauo com um valoi esttico ($)%. ua
compilao uo Less:
.sec {
.skin(600px);
}
e geia o CSS abaixo, *$+('*<+%".
.sec {
column-count: 2;
}
Paia um Web site iesponsivo, o iueal uefinii o nmeio ue colunas ue acoiuo
com a laiguia ue tela uo uispositivo em tempo ieal, que possivel atiavs ue
meuia queiies uo CSS:
@media screen and (min-width: 500px) {
.sec {
column-count:2;
}
}

@media screen and (max-width: 500px) {
.sec {
column-count:1;
}
}

77
7.1.1 Cperadores cond|c|ona|s
Paia testai conuies poue-se se usai os seguintes opeiauoies: >, >=, <, <=, =.
@max-duration: 10s;
@max-repeats: 2;
.anim (@duration) when (@duration >= @max-duration) {
animation-duration: @duration;
animation-iteration-count:1;
}
.anim (@duration) when (@duration < @max-duration) {
animation-duration: @duration;
animation-iteration-count:@max-repeats;
}
.symbol {
.anim(15s);
}
Resultauo em CSS:
.symbol {
animation-duration: 15s;
animation-iteration-count: 1;
}
7.1.2 Inverso de uma cond|o
Paia *$+%')%' o iesultauo ue um teste, poue-se usai when not, que inveite o
iesultauo ua expiesso conuicional.
No exemplo abaixo, o mixin testa se a vaiivel iecebiua ou no um nmeio e
chama o mixin aujust que uefine uma piopiieuaue se o valoi ietoinauo $E# foi
falso (as palavias true e false so ietoinauas poi funes como isnumber mas
elas no tm um significauo especial em Less):
@weight: bold; .adjust(@test) when not (false) {
font-weight:@weight;
}
.section {
font-size: 12pt;
.adjust(isnumber(@weight));
}
Em .section o mixin chamauo com o iesultauo uo teste ue isnumber, que
ietoina false j que bold no nmeio. 0 iesultauo em CSS :
.section {
font-size: 12pt;
font-weight: bold;
}
7.1.3 Deteco de t|pos e un|dades
Alm ue isnumber existem quatio outias funes usauas paia testai o tipo ue um
valoi:

78
Funo Recebe Retorna
iscolor(s)
stiing true se valoi foi uma coi, ou seja, se o stiing
contivei #rrggbb, #rrggbbaa, rgb(%,%,%),
rgba(r,g,b,a), $#-%14%1!#', etc.
false caso contiiio.
iskeyword(s)
stiing Quaisquei nomes, sejam ue seletoies, vaiiveis,
comanuos uo less, ietoinam true. Retoina
false se valoi foi stiing, coi, nmeio ou
uil; true caso contiiio.
isnumber(s)
stiing true se valoi foi um nmeio: 12, 12.S, 12, 12cm,
12S6. false se no foi.
isstring(s)
stiing true se o valoi estivei entie aspas ou
apostiofes. false se no foi stiing.
isurl(s)
stiing true se valoi foi uma uil. false se no foi.
Alguns exemplos usanuo as funes acima:
.istest {
content: '1. string' isstring('12345');
content: '2. string' isstring(12345);
content: '3. keyword' iskeyword(flowerblue);
content: '4. keyword' iskeyword(cornflowerblue);
content: '5. number' isnumber(12.77);
content: '6. number' isnumber(~'123');
content: '7. color' iscolor(cornflowerblue);
content: '8. color' iscolor(~'rgba(100%,100%,100%,1)');
content: '9. url' isurl(url(image.jpg));
content: '10.url' isurl(~'/image/jpg');
}
CSS iesultante:
.istest {
content: '1. string' true;
content: '2. string' false;
content: '3. keyword' true;
content: '4. keyword' false;
content: '5. number' true;
content: '6. number' false;
content: '7. color' true;
content: '8. color' false;
content: '9. url' true;
content: '10.url' false;
}
Paia $_-%'#. existem ainua quatio funes que ietoinam true ou false ue
acoiuo com as uniuaues que os qualificam:

79
Funo Recebe Retorna
ispixel(n)
nmeio true se uniuaue px;
isem(n)
nmeio true se uniuaue em;
ispercentage(n)
nmeio true se uniuaue %;
isunit(n,u)
n = nmeio,
u = uniuaue
true se o nmeio est na uniuaue
especificaua; false caso contiiio.
Exemplos:
@pixvalue: 1px * 30 / 2;
@cmvalue: 10cm + 10pt + .01m;
.istest2 {
content: '1. pixel' ispixel(@pixvalue);
content: '2. pixel' ispixel(convert(@pixvalue, 'pt'));
content: '3. em' isem(12em + 12pt);
content: '4. em' isem(12pt + 12em);
content: '5. percentage' ispercentage(100%);
content: '6. percentage' ispercentage(0.5);
content: '7. unit' isunit(@cmvalue, 'cm');
content: '8. unit' isunit(10ms, 's');
}
CSS:
.istest2 {
content: '1. pixel' true;
content: '2. pixel' false;
content: '3. em' true;
content: '4. em' false;
content: '5. percentage' true;
content: '6. percentage' false;
content: '7. unit' true;
content: '8. unit' false;
}
7.1.4 Comb|nao de expresses cond|c|ona|s
viias expiesses conuicionais pouem sei combinauas com a viigula e tm efeito
somatoiio HX (l#Jl "m6*!#), ou seja, se qualquei uma uas expiesses iesultai em
veiuaueiia, a expiesso inteiia aceita.
skin(@cor, @tambase) when (lightness(@cor) > 50%), (@tambase > 20) {
font-size: convert(@tambase, "pt");
color: darken(@cor, 80%);
background: @cor;
}


8u
.sec1 {
font-family: serif;
.skin(#d0d0d0, 2); // true OU false = true
}
.sec2 {
font-family: serif;
.skin(#101010, 21); // false OU true = true
}
.sec3 {
font-family: serif;
.skin(#101010, 19); // false OU false = false
}
Resultauo em CSS:
.sec1 {
font-family: serif;
font-size: 2;
color: #040404;
background: #d0d0d0;
}
.sec2 {
font-family: serif;
font-size: 21;
color: #000000;
}
.sec3 {
font-family: serif;
}
0 efeito multiplicauoi 2cW (l%l "m6*!#) na combinao ue expiesses obtiuo
com a palavia-chave and:
.mix(@um, @dois) when (iscolor(@um)) and (ispixel(@dois)) {
margin: @dois;
color: @um;
}

.sec4 {
font-family: monospace;
.mix(red, 2px); // true E true = true
}
.sec5 {
.mix(red, 2pt); // true E false = false
}
Resultauo em CSS:
.sec4 {
margin: 2px;
color: #ff0000;
}
.sec5 {
}

81
A funo default() usaua como clusula %".% ue um mixin guaiu. Repiesenta
uma conuio 4%I(J") que sei executaua .% $%$0J- #J)'# mixin conuicional ue
mesmo nomepaimetios iesultai em true.
.mix(@um, @dois) when (iscolor(@um)) and (ispixel(@dois)) {
margin: @dois;
color: @um;
}
.mix(@um, @dois) when(default()) { // caso nenhum mixin selecionado
margin: 0;
color: black;
}
Aplicanuo agoia o mixin .mix nos seletoies abaixo:
.sec4 {
.mix(red, 2px); // true E true = true
}
.sec5 {
.mix(red, 2pt); // true E false = false
}
0btm-se o CSS:
.sec4 {
margin: 2px;
color: #ff0000;
}
.sec5 {
margin: 0;
color: black;
}
7.2 Se|etores cond|c|ona|s
Expiesses conuicionais no so exclusiviuaue uos mixins. Elas pouem sei
aplicauas uiietamente nos seletoies CSS.
@debug: true;

div when (@debug) {
}
Quanuo @debug foi tiue boiuas veimelhas seio colocauas em volta ue caua div:
div {
}

82
Esse tipo ue expiesso so poue sei aplicaua em um nico seletoi ue caua vez.
Paia aplicai a viios seletoies, ueve-se usai o &:
& when (@debug) {
section, footer, aside, div {
}
p:before {
content:'[P]';
}
p:after {
content:'[/P]';
}
}
Resultauo em CSS:
section, footer, aside, div {
}
p:before {
content: '[P]';
}
p:after {
content: '[/P]';
}
7.3 M|x|ns recurs|vos (|oops)
Loops em LESS so chamauas '%!J'.*+(. ue mixins, ou seja, o mixin chama ele
mesmo.
Paia que um loop no seja infinito, necessiio que a caua iepetio uma
conuio seja testaua e que o valoi testauo -J4% ue foima que em algum
momento a conuio seja falsa, e o loop tenha fim.
0 loop abaixo iepete um nmeio ue vezes uefiniua quanuo o mixin foi chamauo.
A caua iepetio, o contauoi compaiauo com zeio, e se foi maioi que zeio, seu
valoi uiminuiuo ue um e o coipo uo mixin executauo. Quanuo o valoi foi zeio,
o mixin teimina.
.repetir(@vezes) when (@vezes > 0) {
.repetir(@vezes - 1);
margin: (@vezes);
}
No bloco abaixo o mixin chamauo paia executai quatio vezes:
.sec2 {
.repetir(4);
}
E o iesultauo uo CSS :

8S
.sec2 {
margin: 1;
margin: 2;
margin: 3;
margin: 4;
}
Loops tambm pouem sei usauos paia geiai blocos inteiios ue seletoies. 0 mixin
abaixo peimite geiai at S sees, caua uma com uma coi ue funuo mais escuia.
.criar-secoes(@vezes) when (@vezes > 0) and (@vezes <= 5) {
.secao-@{vezes} {
color: (darken(#ff0000, 10% * @vezes));
}
.criar-secoes( (@vezes - 1) );
}

.criar-secoes(5);
Ele chamauo logo em seguiua paia iepetii S vezes e geia o seguinte CSS:
.secao-5 {
color: #000000;
}
.secao-4 {
color: #330000;
}
.secao-3 {
color: #660000;
}
.secao-2 {
color: #990000;
}
.secao-1 {
color: #cc0000;
}
Este exemplo ilustia o uso ue loops paia geiai uma seqncia ue keyfiames paia
animao:
@positions: 0px 50px 100px 50px 0px;

.make-keyframe(@step, @count) when (@count > 0) {
.make-keyframe(@step, (@count - 1) );

@pos: @step * (@count - 1);

@{pos} {
top: extract(@positions, @count);
}
}
0so uo mixin:
@keyframes anim {
.make-keyframe(25%, length(@positions));
}

84
Resultauo em CSS:
@keyframes anim {
0% {
top: 0px;
}
25% {
top: 50px;
}
50% {
top: 100px;
}
75% {
top: 50px;
}
100% {
top: 0px;
}
}
{less} {8:coies }

8S
{8: !"#$% '
Less possui viias funes paia geiao, combinao, filtiagem e mesclagem ue
coies. A maioiia geia como iesultauo uma iepiesentao ue coi em CSS no
foimato hexauecimal #rrggbb.
8.1 Def|n|o de cores
viias uas funes ue uefinio ue coies j existem em CSS (ex: rgb(r,g,b)),
mas algumas so existem uesue veises mais iecentes e no tm supoite em
biowseis antigos (hsl, hsla, etc.). 0 Less conveite essas funes em foimatos
hexauecimais #rrggbb ou na funo rgba(r,g,b,a) uo CSS, quanuo a coi
tivei um componente alfa.
Poi exemplo, o couigo em Less abaixo:
@componente: 128;
.secao2 {
color: rgb(@componente,255,255);
}
ii geiai o seguinte CSS:
.secao2 {
color: #80ffff;
}
Se voc quisei -($)%' a funo rgb no CSS (em vez ue conveitei
paia #hhhhhh), necessiio incluii o valoi %$)'% (.B(. e uepois iemov-las uo
CSS geiauo atiavs uo opeiauoi ~:
@componente: 128;
.secao1 {
color: ~'rgb(@{componente},255,255)';
}
que ii pieseivai o stiing no CSS ua foima como ele foi ueclaiauo:
{less} {8:coies }

86
.secao1 {
color: rgb(128,255,255);
}
8.1.1 kp||cas de funes do CSS
As funes abaixo so iplicas uas funes supoitauas poi CSS1 e 2 (rgb, rgba)
e CSSS (hsl, hsla). Touas geiam couigo em foimato #hhhhhh ou
rgba(r,g,b,a).
As funes rgb e rgba geiam uma coi a paitii ue componentes ue luz +%'-%"0(,
+%'4% e (^J" (nmeios ue u a 2SS, ou u a 1uu), mais um componente ("I(
(tianspaincia) entie u e 1 (u a 1uu).
RuB um espao ue coies uepenuente ue haiuwaie. BSL mais intuitivo:
escolhe-se a -()*^ (tonaliuaue) ua coi, uepois a .()J'(KE# e intensiuaue ou biilho
ua "J^. 0ma coi iepiesentaua em BSL poi
&'$: um ngulo que iepiesenta a matiz (u ou S6uueg = veimelho);
%!#'(!#)*": um nmeio entie u e 1 (u - 1uu) que iepiesenta a
satuiao ua coi;
+),&#"$%%: um nmeio entie u e 1 (u - 1uu) que iepiesenta a
quantiuaue ue luz.
0ma coi 1uu satuiaua como #ff0000 iepiesentaua em BSL como B=u, S=1,
L=u.S (L = u nenhuma luz, pieto, L = 1 bianco). A matiz um ciiculo continuo
que comea e teimina em veimelho, assim poue-se ultiapassai o valoi mximo:
uueg, S6uueg, 72uueg, ... = veimelho
12uueg, 48uueg, ... = veiue
24uueg, 6uuueg, ... = azul
Funo Recebe Retorna
rgb(r,g,b)
nmeios (u-2SS)
ou peicentagem
Coi em hexauecimal. D?%-B"#.:
rgb(255,0,0) geia#ff0000,
rgb(100%,0,0) geia #ff0000
rgba(r,g,b,a)
r,g,b = nmeios
(u-2SS) ou ,
a = nmeio entie u
e 1 ou peicentagem
A mesma funo em CSS.
D?%-B"#.:
rgba(255,255,255,0.5)
geia rgba(255,255,255,0.5)
hsl(h,s,l)
h = ngulo,
s,l = nmeios
entie u e 1 ou
Coi em hexauecimal.
D?%-B"#:
hsl(360,1,0.5) geia #ff0000
{less} {8:coies }

87
Funo Recebe Retorna
hsla(h,s,l,a)
h = ngulo,
s,l,a = nmeios
entie u e 1 ou
peicentagem
Funo igba uo CSS coiiesponuente.
D?%-B"#.:
hsla(0,1,0.5,0.5) geia
rgba(255, 0, 0, 0.5)
8.1.2 Iunes nSV
0 espao ue coies BSv tem como piincipal uifeiena em ielao ao BSL o
componente ue intensiuaue ue luz, que chamauo ue ;("J% (ou
BiilhoBiightness) e uefiniuo como o valoi uo -(*#' componente ua coi, em
contiaste com o BSL que uefine lightness como um +("#' -Y4*#. Poitanto, L=u.S
em BSL equivale a v=1 em BSv.
Estas funes no existem no CSS, poitanto so conveitiuas em #hhhhhh ou
rgba pelo piocessauoi Less.
Funo Recebe Retorna
hsv(h,s,v)
h = ngulo,
s,v = nmeios entie
u e 1 ou peicentagem
coi em hexauecimal. ex:
hsv(360deg,1,1)
geia #ff0000
hsva(h,s,v,a)
h = ngulo,
s,v,a = nmeios
entie u e 1 ou
funo igba uo CSS coiiesponuente:
hsva(0,1,1,0.5)
geia rgba(255, 0, 0, 0.5)
Exemplos:
@color1: rgb(100%,50%,25%);
@color2: rgba(128,255,64,0.5);

@color3: hsl(120deg,50%,25%);
@color4: hsla(240deg,100%,75%,75%);

@color5: hsv(120deg,50%,50%);
@color6: hsva(240deg,50%,50%,50%);

.colors {
border-top-color: @color1;
border-right-color: @color2;
border-bottom-color: @color3;
border-left-color: @color4;
background-color: @color5;
color: @color6;
}
Resultauo em CSS:
{less} {8:coies }

88
.colors {
border-top-color: #ff8040;
border-right-color: rgba(128, 255, 64, 0.5);
border-bottom-color: #206020;
border-left-color: rgba(128, 128, 255, 0.75);
color: rgba(64, 64, 128, 0.5);
}
8.2 Lxtrao de componentes de cores
Estas funes iecebem coies e extiaem seus componentes inuiviuuais nos
espaos RuB, RuBA, BSL, BSLA, BSv e BSvA. 0s componentes so ietoinauos
como nmeios uecimais.
8.2.1 Componentes kG8A
Funo Recebe Retorna
red(c)
coi valoi uo componente veimelho (r):
red(#ff8040) geia 2SS (hex ff)
green(c)
coi valoi uo componente veiue (g):
red(#ff8040) geia 128 (hex 8u)
blue(c)
coi valoi uo componente azul (b):
red(#ff8040) geia 64 (hex 4u)
alpha(c)
nmeio valoi uo componente alfa (tianspaincia) (a):
alpha(#ff8844) geia 1,
alpha(fade(@cor, 50%)) geia u.S
8.2.2 Componentes nSL e nSV
Funo Recebe Retorna
hue(c)
coi nmeio inteiio com o ngulo ua matiz uo
espao BSL.
hue( #8080ff ) geia 240
saturation(c)
coi peicentagem ue satuiao no espao BSL.
saturation(#8080ff) geia 100%
lightness(c)
coi peicentagem ue luminosiuaue no espao BSL.
lightness(#8080ff) geia 75%
{less} {8:coies }

89
Funo Recebe Retorna
hsvhue(c)
coi nmeio inteiio com o ngulo ua matiz no
espao BSv.
hsvhue(#8080ff) geia 240
hsvsaturation(c)
coi peicentagem ue satuiao no espao BSv.
hsvsaturation(#8080ff) geia 50%
hsvvalue(c)
coi peicentagem ue biilho no espao BSv.
hsvvalue(#8080ff) geia 100%
Exemplos:
@color2: rgba(64,255,64,0.5);
@color4: hsla(240deg,100%,75%,75%);
@color6: hsva(240deg,50%,50%,50%);

.color-components-rgba:after {
content: red(@color2), green(@color4), blue(@color6), alpha(@color4);
}

.color-components-hsla:after {
content: hue(@color4), saturation(@color4), lightness(@color6);
}

.color-components-hsva:after {
content: hsvhue(@color2), hsvsaturation(@color4), hsvvalue(@color6);
}
Resultauo em CSS:
.color-components-rgba:after {
content: 64, 127.5, 127.5, 0.75;
}

.color-components-hsla:after {
content: 240, 100%, 38%;
}

.color-components-hsva:after {
content: 120, 50%, 50%;
}
8.2.3 Luma
A funo luma ietoina um peicentual que inuica a luminncia ielativo ue uma
coi (biilho peiceptivel) ue acoiuo com a iecomenuaes WSC ue accessibiliuaue.
Funo Recebe Retorna
luma(c)
coi uma peicentagem uo biilho peiceptivel (luma) ua coi.
Ex: luma(red) geia 21%
{less} {8:coies }

9u
Exemplo:
.sec:after {
content: luma(white), luma(yellow), luma(cyan), luma(magenta);
content: luma(red), luma(green), luma(blue), luma(black);
}
Em CSS:
.sec:after {
content: 100%, 93%, 79%, 28%;
content: 21%, 15%, 7%, 0%;
}
8.3 Cperaes sobre cores |nd|v|dua|s
Estas funes alteiam os componentes ue coies inuiviuuais e ietoinam uma coi
mouificaua, mais claia ou escuia, mais ou menos satuiaua, com a matiz ou
tianspaincia alteiauas.
8.3.1 Saturao
Estas funes alteiam a satuiao e usam o espao ue coies BSL.
Funo Recebe Retorna
saturate(c,p)
c = coi,
p = peicentagem
Coi com a satuiao aumentaua na
peicentagem inuicaua (at a satuiao
mxima).
D?%-B"#.:
saturate(#808180,20%) geia #679a67
saturate(#808180,100%)geia #02ff02
desaturate(c,p)
c = coi,
p = peicentagem
coi com a satuiao uiminuiua na
peicentagem inuicaua (at a satuiao
minima).
D?%-B"#.:
desaturate(#0000ff, 60%)
geia #4d4db3
desaturate(#0000ff, 100%)
geia #808080
greyscale(c)
coi coi completamente ue-satuiaua.
Nesmo que desaturate(c, 100%).
D?%-B"#:
greyscale(#ffff00) geia #808080
{less} {8:coies }

91
Exemplos:
saturate(#808180, 0 a 100%):

desaturate(#0000ff, 0 a 100%):

greyscale(#bf2020),
greyscale(#ffff00),
greyscale(#0000ff):

8.3.2 Lum|nnc|a
Estas funes toinam a coi mais claia ou mais escuia.
Funo Recebe Retorna
lighten(c,p)
c = coi,
p = peicentagem
Coi com a luminncia aumentaua na
peicentagem inuicaua (at a mxima).
darken(c,p)
c = coi,
p = peicentagem
Coi com a luminncia uiminuiua na
peicentagem inuicaua (at a minima).

{less} {8:coies }

92
Exemplos ue darken e lighten:
@color: #ff0000;
.light {
background-color: lighten(@color, 25%);
}
.dark {
background-color: darken(@color, 25%);
}
CSS:
.light {
background-color: #ff8080;
}
.dark {
}
8.3.3 Mat|z
A funo spin iecebe um ngulo que aplicauo sobie o ciiculo ou cone ue coies,
vaiianuo a matiz.
Funo Recebe Retorna
spin(c,a)
c = coi,
a = ngulo
Coi coiiesponuente ao ngulo.
veimelho = u = S6u.
veiue = 12u,
Azul = -12u ou 24u.
valoies mltiplos ue S6u teio valoies iguais.
Exemplo ue spin:
@color: #ff0000;
.green {
background-color: spin(@color, 120deg);
}
.blue {
background-color: spin(@color, -120deg);
}
CSS:
.green {
background-color: #00ff00;
}
.blue {
background-color: #0000ff;
}
{less} {8:coies }

9S
8.3.4 1ransparnc|a
Funo Recebe Retorna
fadein(c,p)
c = coi,
p = peicentagem
Biminui a tianspaincia '%"()*+(
somanuo a peicentagem ao valoi alfa (at
o mximo).
fadein(rgba(255,0,0,1), -10%)
geia rgba(255, 0, 0, 0.9)
fadein(rgba(255,255,0,0.5), 10%)
geia rgba(255, 255, 0, 0.6)
fadeout(c,p)
c = coi,
p = peicentagem
Aumenta a tianspaincia '%"()*+(
subtiainuo a peicentagem uo valoi alfa
(at o minimo).
fadeout(rgba(255,0,0,1), 10%)
geia rgba(255, 0, 0, 0.9)
fadeout(rgba(255,255,0,0.5), 10%)
geia rgba(255, 255, 0, 0.4)
fade(c,p)
c = coi,
p = peicentagem
Aplica um valoi ue tianspaincia
(8.#"J)# na coi (substitui o valoi alfa
existente).
fade(rgba(255,0,0,1), 10%)
geia rgba(255, 0, 0, 0.1)
fade(rgba(255,255,0,0.5), 10%)
geia rgba(255, 255, 0, 0.1)
8.4 Cperaes de comb|nao de cores
As opeiaes ue combinao ue coies pouem sei classificauas em simtiicas
(onue a oiuem uas coies no ielevante) e assimtiicas (onue a oiuem impoita).
8.4.1 S|mtr|cas
Funo Recebe Retorna
mix(c1, c2)
2 coies Nistuia uuas coies ue foima piopoicional e
inclui canais alfa).
mix(orange, purple) geia #c05340
mix(rgba(255,255,0,0.5),red)
geia rgba(255, 64, 0, 0.75)
{less} {8:coies }

94
Funo Recebe Retorna
average(c1, c2)
2 coies Nistuia uuas coies utilizanuo a muia ue caua
canal.
average(orange, purple)geia #c05340
average(rgba(255,255,0,0.5),red)
geia #ff4000
multiply(c1, c2)
2 coies Coi mais escuia iesultante ua multiplicao
entie os componentes uas uuas coies. 0posto
ue screen.
multiply(#800080, #800080) geia #400040
multiply(yellow, red) geia #ff0000 (ieu)
screen(c1, c2)
2 coies Coi mais claia iesultante ua multiplicao uo
valoi inveiso uos componentes uas uuas coies.
0posto ue multiply.
screen(#800080, #800080) geia #c000c0
screen(yellow, red) geia #ffff00 (yellow).
difference(c1, c2)
2 coies Coi iesultante ua subtiao ua segunua coi ua
piimeiia, canal poi canal. Subtiao ue bianco
inveite a coi.
difference(#ff0000,#ffffff) geia #00ffff
difference(#ff00ff,#00ff7f) geia #ffff80
exclusion(c1, c2)
2 coies coi iesultante ue um uiffeience ue menos
contiaste.
exclusion(#ff44ff,#44ff7f) geia #bbbb80
negation(c1, c2)
2 coies coi iesultante ua efeito inveiso ue uiffeience.
negation(#ff0000, #ffffff) geia #00ffff
negation(#ff00ff,#00ff7f) geia #ffff80
8.4.2 Ass|mtr|cas
Funo Recebe Retorna
overlay(c1, c2)
2 coies Coi com canais mais escuios ou mais claios
ueteiminauos pela piimeiia coi.
overlay(red, yellow) geia #ff0000 (ieu)
overlay(yellow, red) geia #ffff00 (yellow)
{less} {8:coies }

9S
Funo Recebe Retorna
hardlight(c1, c2)
2 coies Coi com canais mais escuios ou mais claios
ueteiminauos pela segunua coi. 0posto ue
overlay.
hardlight(red,yellow) geia #ffff00 (yellow)
hardlight(yellow,red) geia #ff0000 (ieu)
softlight(c1, c2)
2 coies Coi iesultante ue overlay ue menos contiaste.
softlight(#400000, #808000) geia #400000
softlight(#808000, #400000) geia #604000

{less} {9:+less }

96
{9: !"#$$ &
Este capitulo contm topicos avanauos ou menos usauos que no foiam
aboiuauos em mouulos anteiioies.
9.1 Importao de est||os
Bifeientemente uo CSS, uiietivas @import pouem sei colocauas em qualquei
lugai uo aiquivo Less. A geiao uo CSS ii posicion-las no inicio uo aiquivo
coiietamente (emboia seja uma boa pitica sempie mant-los no inicio uo
aiquivo).
A sintaxe a mesma uo CSS:
@import "documento.css";
Less tambm peimite que o aiquivo impoitauo seja um uocumento Less. Neste
caso, ele funcionai como se o aiquivo impoitauo estivesse anexauo antes uo
aiquivo que o impoita.
Se a extenso uo aiquivo foi .css, o less ii tiat-lo como um @import comum
uo CSS, e simplesmente copiai a ueclaiao paia o CSS iesultante.
Se foi qualquei outia extenso, o aiquivo sei incoipoiauo e tiatauo como senuo
Less.
Se o aiquivo foi impoitauo sem extenso, o less ii anexai uma extenso .less a
ele e buscai incoipoiai o aiquivo.
Poue-se ieuefinii o compoitamento uefault uo impoit com seis opes que so
passauas entie painteses entie a uiietiva @import e o nome uo aiquivo, ua
foima:
@import (parametro) "arquivo";
0s seguintes paiametios pouem sei usauos:
{less} {9:+less }

97
-%%: tiata o aiquivo como CSS (inuepenuente ue sua extenso)
)"+)"$: inclui o conteuo uo aiquivo no CSS final, mas no o piocessa
+$%%: tiata o aiquivo como LESS (inuepenuente ue sua extenso)
.'+#)/+$: aceita que um um aiquivo seja impoitauo mais ue uma vez
*"-$: peimite impoita o aiquivo uma vez e ignoia outias tentativas
($0$($"-$: inclui e usa o aiquivo LESS mas no utiliza o conteuo na
saiua
Exemplo:
import (reference) 'biblioteca.less';
9.1.1 Import e var|ve|s
Se a impoitao iesultai em uma vaiivel uefiniua mais ue uma vez, a _")*-(
uefinio, consiueianuo o escopo uo atual paia o mais exteino, usaua. Poi
exemplo, na pagina more-3-imports-base.less foiam uefiniuas as seguintes
vaiiveis:
@base: #ff0000;
@background: darken(@base, 20%);
@foreground: lighten(@base, 20%);
Em uma outia folha ue estilos Less, essa biblioteca impoitaua:
@import "more-3-imports-base.less";
@base: blue;
.sec {
background-color: @background;
color: @foreground;
}
0 valoi ue @base foi ieuefiniuo, mas @background e @foreground no foiam
ieuefiniuas. Elas so calculauas com base no valoi ()J(" ue @base, que agoia
#0000ff. 0 iesultauo em CSS :
.sec {
color: #6666ff;
}
9.1.2 8|b||otecas te|s
Existem viias bibliotecas ue mixins paia o Less que pouem sei incoipouauos
em quaisquei piojetos Less, evitanuo a necessiuaue ue se ciiai mixins obvios
como os que liuam com o supoite multiplatafoima uos iecuisos uo CSSS. A
maioiia poue sei usaua atiavs ua impoitao ue um nico aiquivo .less.
0utios ofeiecem bibliotecas ue mixins em aiquivos sepaiauos, mais auequauos
ao uso em biowseis.
{less} {9:+less }

98
A biblioteca mais simples +$%% $+$.$"#%. Paia us-la, baixe o aiquivo
elements.less uo site http:lesselements.com e impoite no seu piojeto:
@import "elements.less";
Com isso poue-se usai qualquei mixin uisponivel, poi exemplo:
.secao {
.opacity(0.9); // usando mixin do less elements
background-color: blue;
}
Se voc piecisai ue mais mixins, h pelo menos tis outias opes mais
completas: 2$%%3!#, 4+$!(+$%% e 5($6**#, alm uo piopiio 78)##$( 9**#%#(!/
que inclui mixins ieutilizveis em viios aiquivos .less que pouem sei
impoitauos.
Paia usai uma biblioteca ue foima esttica, o iueal impoitai a biblioteca inteiia.
0 CSS geiauo contei apenas os iesultauos uos mixins efetivamente usauos. Paia
usai no biowsei a peifoimance ciitica, poitanto o iueal caiiegai apenas o
necessiio. A maioi paite uas bibliotecas tambm ofeiece os mixins em aiquivos
sepaiauos, paia que se impoita apenas o que sei usauo.
9.2 Acess|b|||dade e suporte mu|t|-p|ataforma
Esta seo aboiua algumas funes que ajuuam a uesenvolvei Web sites
accessiveis, mais eficientes e inuepenuentes ue biowsei.
9.2.1 Contraste
A funo contrast iecebe uma coi e uevolve outia que contiasta com a outia
(uefault 4S ue uifeiena). Apenas a coi piecisa sei passaua como paimetio,
mas tambm poue-se configuiai o nivel ue contiaste infoimanuo um pai ue
coies como iefeincias ue claioescuio e a peicentagem ue contiaste uesejaua.
Funo Recebe Retorna
contrast(c)
contrast(c,c1,c2)
contrast(c,c1,c2,p)
c = a coi que seivii ue
paimetio paia calculai o
contiaste.
c1, c2 = coies ue iefeincia
claioescuio (opcionais) -
4%I(J") pietobianco.
p = peicentagem ue contiaste
(opcional) - 4%I(J") 4S
coi contiastante em
ielao coi ue
iefeincia.
{less} {9:+less }

99
0 mixin abaixo usauo paia aplicai um estilo com em um bloco em que o texto
contiasta com a coi ue funuo:
.labeled-box(@color, @label) {
background-color: @color;
&:before {
content: @label;
color: contrast(@color);
}
}
Poue sei usauo paia gaiantii que o texto seja sempie visivel:
.sec-1 {
.labeled-box(red, '#ff0000')
}
.sec-2 {
.labeled-box(yellow, '#ffff00')
}
.sec-3 {
.labeled-box(blue, '#0000ff')
}
CSS geiauo:
.sec-1 {
background-color: #ff0000;
}
.sec-1:before {
content: '#ff0000';
color: #ffffff;
}

.sec-2 {
background-color: #ffff00;
}
.sec-2:before {
content: '#ffff00';
color: #000000;
}

.sec-3 {
background-color: #0000ff;
}
.sec-3:before {
content: '#0000ff';
color: #ffffff;
}
9.2.2 Converso de cor para formato M|crosoft
A funo argb conveite uma coi em uma iepiesentao ue coi piopiietiia
compativel com aplicaes >*!'#.#I) e V$)%'$%) D?B"#'%'. Poue sei usaua em um
mixin que geia ueclaiaes CSS inuepenuentes ue biowsei. Nesta iepiesentao
o fatoi alfa um nmeio hexauecimal entie uu e FF e iepiesentauo antes uos
paies hexauecimais uos componentes RuB. 0 foimato iesultante #aarrggbb.
{less} {9:+less }

1uu
Funo Recebe Retorna
argb(a,r,g,b)
a = nmeio entie u e 1
ou peicentagem,
r,g,b = nmeios (u-
2SS) ou peicentagem
coi em hexauecimal no
foimato #aarrggbb.
D?%-B"#:
argb(rgba(255,0,0,0.5))
geia #80ff0000.
9.2.3 Conversao data-ur|
Esta funo conveite uma 0RL ue imagem em um iecuiso embutiuo no CSS
(url(data)). A imagem ueve estai accessivel ao compilauoi Less em caminho
absoluto ou ielativo folha ue estilo. Ela sei couificaua pelo piocessauoi em
foimato \(.% QC, e tei seus bytes embutiuos uiietamente na folha CSS geiaua.
@uri: data-uri('../../images/less-logo.png');
.sec10 {
image: @uri;
}
Resultauo em CSS:
.sec10 {
image: url("data:image/png;base64,iVBORw0KGgoAAA ... kJggg==");
}
0 aiquivo CSS ficai maioi que a imagem oiiginal. Esta uma soluo paia
imagens que so utilizauas muitas vezes (fontes, icones) quanuo fazei uownloau
ua imagem em nova iequisio uma alteinativa menos eficiente.
9.3 8|b||otecas de m|x|ns com namespaces
0m namespace em less ueclaiauo com um mixin usanuo seletoi ue IB.
Namespaces so teis paia agiupai outios mixins e evitai conflitos ue nome,
piincipalmente em aplicaes que impoitam folhas ue estilo ue teiceiios.
Abaixo esto uois mixins ue mesmo nome, poim em namespaces uifeientes:
#circular {
.mask() {
}
}

#rectangular {
.mask() {
-webkit-mask-image: url(rectangle.svg);
}
}
{less} {9:+less }

1u1
Paia usai ueve-se usai o nome uo mixin exteino (namespace) anexauo ao nome
uo mixin inteino (poue-se tambm usai a notao#externo > .interno).
.photo1 {
border: none;
#circular.mask();
}

.photo2 {
border: none;
#rectangular.mask();
}
Resultauo em CSS:
.photo1 {
border: none;
}
.photo2 {
border: none;
-webkit-mask-image: url(rectangle.svg);
}
9.4 Uso de |ess no browser
0 piocessauoi Less poue sei executauo no biowsei atiavs uo mouulo less.js .
Ele poue sei baixauo ue http:lesscss.oig, ou vinculauo a um iecuiso CBN:
<script
src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js">
</script>
Quaisquei folhas ue estilo Less em uso na pgina que piecisem sei piocessauas
pelo sciipt, uevem sei caiiegauas na pgina ($)%. uessa chamaua:
<link rel="stylesheet/less" type="text/css" href="estilo1.less" />
<link rel="stylesheet/less" type="text/css" href="estilo2.less" />
9.4.1 Desenvo|v|mento e depurao no browser
Paia tiabalhai com Less em tempo ue uesenvolvimento, e tei os iesultauos
iepiocessauos biowsei sempie que uma alteiao foi feita na folha ue estilos,
ligue o mouo watch chamanuo less.watch() 4%B#*. ue caiiegai o less.js:
<script>less.watch()</script>
0ma extenso paia o FiieBug, o FiieLess peimite obtei infoimaes uetalhauas
ue eiios, nmeios ue linha onue os eiios ocoiieiam, etc. quanuo se tiabalha com
Less.
{less} {9:+less }

1u2
9.S Lxecuo de IavaScr|pt v|a Less
Existe um iecuiso $E# 4#!J-%$)(4# que peimite executai tiechos ue }avaSciipt
uentio ue Less. No possivel executai tiechos gianues. Funes exteinas so
possiveis, mas apenas com Less no biowsei ou em uma aplicaes Noue.js. E um
iecuiso que no est mais uocumentauo no site (uesue Less 1.6), mas ainua poue
sei usauo.
Paia executai }avaSciipt uentio ue uma folha ue estilos Less, chame o }avaSciipt
uentio ue um bloco uelimitauo poi ciases:
@texto: "Digite aqui!";
p.editor {
&:before {
content: `@{texto}.toUpperCase()`;
}
}
As vaiiveis pouem sei passauas ue foima inteipolaua, como em stiings. 0
mtouo toUpperCase() em }avaSciipt pe a stiing em caixa alta. 0 iesultauo em
CSS :
p.editor:before {
content: "DIGITE AQUI!";
}
E possivel fazei coisas bem mais sofisticauas, e contoinai uiveisas limitaes uo
Less, paganuo o pieo uo aumento ua complexiuaue.
Este outio exemplo um mixin que geia piopiieuaues e valoies (a linha uma
so e no tem quebia):
@coords: "TOP LEFT BOTTOM RIGHT";
.center(@position) {
margin: auto !important;
position: ~`'@{position};\n ' + @{coords}.toLowerCase().split(' ')
.join(': 0;\n ') + ': 0'`;
}
0so uo mixin:
.section { .center(absolute); }
Resultauo em CSS:
.section {
margin: auto !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
{less} {9:+less }

1uS
9.S.1 Acesso ao DCM do browser v|a IavaScr|pt
}avaSciipt em Less $E# gaiante acesso ao B0N, apenas ao !#'% }avaSciipt. Poue-
se tiansfoimai stiings, aiiays, geiai uatas e fazei contas matemticas, mas no
possivel lei vaiiveis uo mouelo ue objetos:
@variavel: `document.images.length`; // NO FUNCIONA SEM BROWSER!
Quanuo se executa o pi-piocessauoi Less no seiviuoi ou em linha ue comanuo
$E# %?*.)% B<6*$(, logo no existe B0N nem document. Less stanualone piecisa
geiai um CSS esttico.
Nas no h gaiantia que isto ii funcionai no biowsei. 0s objetos ua ivoie B0N
pouem no tei siuo ciiauos quanuo a pgina Less geiai o CSS. E possivel
contoinai algumas limitaes, mas o compoitamento ainua sei uepenuente ue
platafoima.
0ma maneiia ue gaiantii que o B0N exista, piocessai mais uma vez toua a
folha ue estilos (Bm. a caiga. Isto poue sei feito com less.watch() , que caiiega
a folha ue estilos Less peiiouicamente. Poue-se configuiai as opes uo
piocessauoi paia que o pioximo iepiocessamento uemoie muito:
<script>
less.poll = 86400000;
less.watch(); // reprocessa uma vez a cada 86400 segundos.
</script>
Se o objetivo foi usai infoimaes uinmicas uo biowsei paia ieconfiguiai a
folha ue estilos, poue-se fazei o oposto: uiminuii ao mximo o tempo entie os
iepiocessamentos. Assim, se o usuiio ieuimensionai uma janela, o Less pouei
usai esse uauo paia ieposicionai os objetos.
Poi exemplo, o couigo abaixo (so funciona em biowsei) usa a altuia e laiguia ua
janela obtiua via }avaSciipt paia posicionai um BIv no centio ua janela:
// Variaveis DOM - funciona apenas no browser!
@win-height:`$(window).height()`;
@win-width:`$(window).width()`;

@div-width: (@win-width / 2px);
@div-height: (@win-height / 2px);
@div-left-position: (@win-width - @div-width) / 2px;
@div-top-position: (@win-height - @div-height) / 2px;

.box {
background: red;
height: @div-height;
width: @div-width;
position: absolute;
top: @div-top-position;
left: @div-left-position;
}
{less} {9:+less }

1u4
Incluinuo o bloco abaixo no biowsei:
<script>
less.poll = 10;
less.watch()
</script>
o Less sei iepiocessauo a caua uez milissegunuos, fazenuo com que as posies
muuem uinamicamente.
E impoitante obseivai que essas tcnicas no so (ainua) muito eficientes. A
peifoimance baixa e poue sei mais simples e eficiente usai }avaSciipt.
9.6 Interag|ndo com o parser
Poue-se tei acesso ao paisei uo Less e configui-lo, lei componentes ue uma
folha ue estilos e alteiai vaiiveis usanuo os iecuisos ue sciipting uo Less,
acessiveis tanto no seiviuoi via Noue.js, quanto no biowsei. Poucos uesses
iecuisos so uocumentauos, poitanto, uevem sei usauos com ieseiva.
9.6.1 Subst|tu|o de var|ve|s no browser
vaiiveis globais pouem sei mouificauas via }avaSciipt. A alteiao no alteia
nem iecaiiega a folha ue estilo mas foia o iepiocessamento. As vaiiveis
alteiauas iio valei paia touo o escopo ua folha ue estilos na pgina.
Paia mouificai use um sciipt caiiegauo (Bm. o less.js uefininuo um
objeto less.modifyVars contenuo a lista uas vaiiveis a seiem ieuefiniuas:
<script>
less.modifyVars({
'@cor-default': 'rgba(128,128,128,0.9)',
'@tam-fonte-default': '12pt',
'@margens': '2px'
});
</script>
vaiiveis globais novas (que no existem na folha ue estilos) pouem sei
inseiiuas ue foima similai usanuo less.globalVars.
9.6.2 Iunes custom|zadas
Poue-se tambm ciiai funes em }avaSciipt que seio usauas uentio ue folhas
ue estilo Less caiiegauas no biowsei. Essas funes uevem sei uefiniuas
em less.functions e uepenuem uo uso ue tipos ue uauos no-uocumentauos
paia funcionai. Pouem sei ueclaiauas ue uuas foimas:
1) Como paite uo objeto less ($)%. ue caiiegai o less.js:
{less} {9:+less }

1uS
<script>
less = {
functions: {
media: function(a, b) {
return new less.tree.Dimension((a.value + b.value) / 2);
}
}
};
</script>
2) ou 4%B#*. ue caiiegai o less.js uesta foima:
<script>
less.tree.functions.media = function(a, b) {
return new less.tree.Dimension((a.value + b.value) / 2);
};
</script>
0ma vez uefiniua, a funo poue sei chamaua uentio ua folha ue estilos Less
como se fosse uma funo nativa:
.centralizar(@left, @right) {
@a: unit(@left);
@b: unit(@right);
margin-left: unit(media(@a, @b), px);
}

.section {
.centralizar(25px; 35px;);
}
CSS geiauo:
.section {
margin-left: 30px;
}
9.6.3 Le|tura de var|ve|s
0 paisei uo Less poue sei usauo paia caiiegai uma folha ue estilos e tei acesso
ao seu conteuo. A folha ue estilos poue sei uma stiing geiaua na hoia poi
}avaSciipt, ou mesmo um uocumento exteino que no seja caiiegauo na folha
como Less.
0 sciipt }Queiy abaixo caiiega uma folha ue estilos Less localizaua no seiviuoi e
impiime uma lista ue suas vaiiveis e valoies:
<script>
$( document ).ready(function() {
var parser = new(less.Parser);
$.get( "../stylesheets/more/more-6-scripts.less", function(data) {
parser.parse(data, function (e, tree) {
var variables = tree.variables();
for (i in variables) {
var name = variables[i].name;
// Falha se variavel contiver expressoes!
var value = variables[i].value.toCSS();
{less} {9:+less }

1u6
$("#varlist").append("<li>"+name + ":" + value+"</li>");
}
});
});
});
</script>
viios uesses iecuisos uo Less ainua so pouco uocumentauos e pouem muuai,
poitanto evite us-los em piouuo. 0 piocessamento Less no biowsei tambm
pouco peifoimtico, senuo iueal geiai as folhas ue estilo CSS offline.
Piocessamento Less online ueve apenas sei usauo em uesenvolvimento ou em
sites com movimento muito baixo.
9.6.4 Uso em ap||caes Node.[s
Em aplicaes }avaSciipt lauo-seiviuoi como aplicaes c#4%7d., o Less poue sei
instalauo localmente em um piojeto usanuo o Noue Package Nanagei npm:
npm install less
E uepois usai require nos sciipts que usaiem o Less:
var less = require('less');
A paitii uai poue-se tei acesso aos iecuisos uo Less atiavs uo objeto less ue
foima semelhante ao uso no biowsei:
var fs = require('fs');
var less = require('less');
var parser = new(less.Parser);

fs.readFile('stylesheets/styles.less', 'utf8', function(err, data) {
if(!err) {
parser.parse(data, function (e, tree) {
var variables = tree.variables();
tree.toCSS();
...
});
}
});
9.7 Cpes de ||nha de comando
Buas opes toinam o compilauoi Less mais iigoioso uuiante a compilao. As
opes so passauas em linha ue comanuo sepaiauas poi espaos ua foima:
lessc opes arquivo.less
A opo -su=on (stiict units) piovoca eiios ue compilao em clculos com
uniuaues incompativeis, multiplicao e uiviso com uniuaues. Esses eiios so
ignoiauos poi uefault.
{less} {9:+less }

1u7
A opo -sm=on (stiict math) apenas executa expiesses matemticas que
estiveiem 4%$)'# 4% B('S$)%.%.. Isto poue toinai-se uefault na veiso 2.u ue Less.
Com -sm=on o bloco Less abaixo:
.sec {
font-size: 12pt + 10pt;
margin: (12cm + 10cm);
}
sei geiauo em CSS como:
.sec {
font-size: 12pt + 10pt;
margin: 22cm;
}

{less} {1u:iefeincias }

1u8
{10: !"#"!$%&'() +
10.1 Lspec|f|caes e documentao of|c|a|
1. Bocumentao oficial. A uocumentao oficial bastante abiangente e
ofeiece viios exemplos simples sobie o uso uos iecuisos uo Less. A
maioi paite uo mateiial uesta apostila baseia-se na uocumentao oficial.
0))Bfgg"%..!..7#'6
2. Especificaes uo CSS. Less CSS, poitanto impoitante conhecei bem o
CSS e suas iegias j que elas tambm se aplicam a Less, e paia uescobiii
eiios causauos poi CSS geiauo incoiietamente.
0))Bfgg```7`A7#'6g/)i"%g&//g.B%!.
A7 Bocumentao uo Less4}. 0 compilauoi Less em }ava um piojeto
paialelo com menos iecuisos que o Less oficial, mas a sua uocumentao
contm topicos e exemplos que no fazem paite ua uocumentao
oiiginal.
0))B.fgg6*)0J87!#-g/#->%'*g"%..Cdg`*3*gnB(6%.
C7 Biscusso uo piojeto Less no uitBub. Paia topicos no uocumentauos,
bugs, iequeiimentos, veises, esta a fonte oficial (emboia iespostas
no Stack0veiflow talvez sejam mais ipiuas).
0))B.fgg6*)0J87!#-g"%..g"%..7d.g*..J%.
10.2 Art|gos e exemp|os
97 Tutoiial ue CSS uo Nozilla Bevelopei Netwoik - NBN. Less CSS,
poitanto impoitante conhecei bem o CSS. 0 tutoiial uo NBN uma uas
melhoies iefeincias ua Web.
0))B.fgg4%+%"#B%'7-#^*""(7#'6g%$1b/g4#!.gh%8g&//

1u9
:7 Less CSS - Tips anu Tiics (2u1S) poi Niia }uioviov. 0ma lista ue
tiuques e uicas com Less que no apaiecem na uocumentao oficial.
0))Bfgg-%'*1.)JII78"#6.B#)7!#-78'g:F9AgFAg"%..1!..1)*B.1($41)'*!.70)-"
S. Less CSS - Expiessions anu Tiaps (2u1S) poi Niia }uioviov.
Aimauilhas uo Less e outios topicos que no so uiscutiuos na
uocumentao oficial.
0))Bfgg-%'*1.)JII78"#6.B#)7!#-78'g:F9AgFGg"%..1!..1%?B'%..*#$.1($41)'(B.70)-"
C7 Q&A sobie Less em Stack0veiflow. Na ausncia ue uocumentao e
exemplos sobie Less, o banco ue peiguntas e iespostas Stack0veiflow
(assim como o foium uo piojeto Less no uithub) so complementos
valiosos.
0))Bfgg.)(!3#+%'I"#`7!#-gkJ%.)*#$.g)(66%4g"%..o.#')p+#)%.
G7 1u Less CSS examples you shoulu steal foi youi piojects (2u11) poi
}oshua }ohnson. Lista ue mixins teis. E antigo e existem fontes melhoies
paia mixins, mas uma boa iefeincia paia entenuei Less atiavs ue
exemplos.
0))Bfgg4%.*6$.0(!37$%)g(')*!"%.g!..g9F1"%..1!..1%?(-B"%.1i#J1.0#J"41.)%("1I#'1i#J'1B'#d%!).g
10.3 1utor|a|s no-of|c|a|s
97 B0NT REAB this Less CSS tutoiial (2u11) poi }onathan veiiecchia.
0))Bfgg+%'%3*(7!#-g"%..1!..g4#$)1'%(41"%..1!..1)J)#'*("10*60"i1(44*!)*+%
:7 A Compiehensive Intiouuction to Less e Nixins (2u12) poi Ivaylo
ueichev. Tutoiiais uo site-point com uma intiouuo a Less e mixins.
0))Bfgg```7.*)%B#*$)7!#-g(1!#-B'%0%$.*+%1*$)'#4J!)*#$1)#1"%..g
0))Bfgg```7.*)%B#*$)7!#-g(1!#-B'%0%$.*+%1*$)'#4J!)*#$1)#1"%..1-*?*$.g
S. Leaining Less (2u12) poi Alex Ball. 0m tutoiial (incompleto) com viios
exemplos.
0))Bfgg```74%+%"#B%'4'*+%7!#-g:F9:gFCg"%('$*$61"%..1($1*$)'#4J!)*#$
10.4 8|b||otecas
97 less.elements: coleo populai ue mixins ue uso geial paia usai em
piojetos Less. E pequena, mas talvez seja tuuo o que voc piecisa.
0))Bfgg"%..%"%-%$).7!#-
:7 LESS Bat: outia biblioteca ue mixins, com bem mais iecuisos.
0))Bfgg"%..0()7-(4%8i.#J'!%7!#-g
A7 Cleailess: outia biblioteca bem completa.
0))Bfgg!"%('"%I)76*)0J87*#g!"%('"%..g

11u
C7 Pieboot: biblioteca ue mixins usaua pelo Twittei Bootstiap.
0))Bfgg6%)B'%8##)7!#-g
10.S Ierramentas
97 less.app: compilauoi Less gifico paia Nac.
0))Bfgg*$!*4%$)GU7!#-g"%..g
:7 Ciunch: euitoi ue couigo com geiauoi e compiessoi ue CSS integiauo
paia platafoimas Auobe Aii (Winuows ou Nac)
0))Bfgg!'J$!0(BB7$%)g
A7 WinLess: compilauoi Less gifico paia Winuows.
0))Bfgg`*$"%..7#'6g
C7 lesstestei.com: aplicativo online paia testai couigo Less e geiai CSS.
0))Bfgg"%..)%.)%'7!#-g
G7 Can I use: platafoima web com estatisticas ue supoite paia CSS, BTNLS,
Svu e }avaSciipt em biowseis uo meicauo.
0))Bfgg!($*J.%7!#-g

111
Exerccios
Parte 1 (introduo, aninhamento, variveis,
extend e mixins)
1. |V$)'#4JKE# Teste a configuiao uo seu ambiente:
a. Tiansfoime o uocumento teste.css em um uocumento .less,
uefina uma vaiivel @cor paia as coies que se iepetem e aninhe
os tis blocos. 0tilize um compilauoi Less paia geiai um
uocumento CSS e teste-o paia veiificai se ainua funciona.
b. Alteie o aiquivo teste.html ue foima que ele caiiegue o
uocumento Less (em vez uo CSS) paia piocessamento uuiante a
caiga. Alteie o uocumento Less (muue o valoi ua vaiivel @cor) e
veja se o BTNL alteiauo.

2. |2$*$0(-%$)# 0 aiquivo basics.css contm uiveisos blocos ue
seletoies contextuais e pseuuo-classes. 0tilize-o como base paia ciiai um
uocumento .less que ieoiganize os 17 blocos em um nico bloco
paitinuo ue body, utilizanuo o aninhamento ao mximo (paia contexto e
pseuuo-elementos).

S. |;('*<+%*. Remova a uuplicao ue uauos ua folha ue estilos
variables.css. Ciie uma folha ue estlos Less equivalente que utilize
vaiiveis paia:
a. touas as coies
b. familias ue fontes
c. paites ue nomes ue piopiieuaues que se iepetem (boiuei, coloi);
u. paite ua 0RL que se iepete nas imagens
e. nome ua piopiieuaue .sec1 (inclua sec1 em uma piopiieuaue)

4. |D?)%$4 0tilize o uocumento extend.less que impoita basics.less
e usanuo (B%$(. pseuuo-elementos :extend (sem ueclaiai novas
piopiieuaues), faa com que a pgina extend.html, que usa
extend.css heiue alguns estilos ue basics.less. Estenua:
a. .article !#- article
b. .article .contents !#- .contents
c. .article .contents .section !#- section
u. .article .contents .section h1 !#- section .h1
e. nav li !#- .nav li
f. nav li a:hover !#- .nav li a:hover.

112

0se aninhamento e faa auaptaes se necessiio. veiifique se a
ueclaiao usaua no extenu uma coiiesponuncia %?()(.

S. |D?)%$4 0 uocumento mixin-extend.less utiliza um mixin
.gradient() paia constiuii um giauiente ue cinco coies. 0 mixin est
uefiniuo em gradient-mixin.less que impoitauo em mixin-
extend.less. A pgina mixin-extend.html exibe um div bianco,
cujas uimenses e boiua esto uefiniuas em mixin-extend.less.
Analise o couigo geiauo no CSS e alteie o uocumento mixin-
extend.less ue tal maneiia que o giauiente apaiea uesenhauo no
div.

6. |>*?*$. 0 uocumento mixin-6.html contm quatio tabelas iunticas
que uifeiem apenas no id. 0 uocumento mixin-6.less aplica funes
que vaiiam a laiguia e o biilho ue uma coi paia caua tabela. 0bseive que
h bastante uuplicao ue couigo. Ciie um mixin paia geiai o CSS paia as
tabelas que ieceba como aigumentos pelo menos uma coi e uma laiguia.
Chame o mixin paia caua id e veiifique se o CSS geiauo o mesmo.

7. |>*?*$. Analise o uocumento mixin-7.less e iuentifique tiechos
uuplicauos ou tiechos que possam sei embutiuos em mixins. Ciie os
mixins inuicauos utilizanuo ou no os nomes sugeiiuos, e substitua os
tiechos uuplicauos ou longos poi chamauas a esses mixins. Befina
aigumentos como inuicauos e use valoies uefault se uesejai.

Less CSS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Less CSS

Enviado por

Direitos autorais:

Formatos disponíveis

{less}

css menos cdigo

Você também pode gostar