Você está na página 1de 112

{less}

css menos código







helder da rocha
(18 de março 2014)
{less} {1:intiouução }

2
{apresentação}
Pié-piocessauoies CSS como Less e SASS¡SCSS são hoje feiiamentas essenciais
paia o uesenvolvimento Web. Eles estenuem o CSS com iecuisos que toinam o
uesenvolvimento mais eficiente, mais fácil ue mantei e ieutilizai. Less é um uos
mais populaies pié-piocessauoies CSS. E usauo em bibliotecas ue temas,
aplicações e em fiamewoiks populaies ue uesign iesponsivo como o Twittei
Bootstiap.
Este cuiso exploia a tecnologia Less em uetalhes, ofeiecenuo uma intiouução
abiangente e cobiinuo topicos mais avançauos atiavés ue exemplos. você ueve
conhecei BTNL e CSS, uma vez que Less é uma extensão uo CSS e também é
impoitante entenuei o CSS que é geiauo quanuo se usa Less. Não é pieciso
conhecei }avaSciipt, mas se você soubei usai a linguagem poueiá exploiai
alguns iecuisos não-essenciais ue Less que iequeiem }avaSciipt. 0 uso ue Less
com }avaSciipt é aboiuauo em um uos topicos uo capitulo 9.
Less geia CSS, então é mais impoitante obseivai o couigo geiauo que a apaiência
uo efeito uo CSS na página. Ao uepuiai couigo Less é essencial tei acesso ao CSS
geiauo. Neste cuiso, paia uemonstiai ueteiminauos conceitos são usauos
exemplos ue Less que geiam CSS que não necessaiiamente seivem paia uso em
páginas Web, ou mesmo CSS incoiieto paia ilustiai uifeientes efeitos uo
piocessamento ue funções ou opeiações uo Less.
Paia acompanhai este tutoiial você ueve tei um computauoi com um euitoi ue
textos e um compilauoi Less instalauo. Algumas opções ue euitoies e
compilauoies seião apiesentauas no piimeiio capitulo. 0 capitulo 1u inclui
iefeiências usauos na pesquisa ueste mateiial, tutoiiais, aitigos e outias
infoimações que seião úteis uuiante o tieinamento.
{less} {1:intiouução }

S
{arquivos}
0 couigo mostiauo nos exemplos ueste livio poue sei baixauo ua Inteinet no
site: http:¡¡github.com¡aigonavisbi¡LessCouise em foimato ZIP ou atiavés ue
uIT !"#$%.
Touo o couigo foi testauo e compilauo usanuo a veisão 1.7 uo Less (feveieiio ue
2u14) uuiante a geiação 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 compilação estão touos uisponiveis na
pasta examples, em sub-pastas coiiesponuentes a caua capitulo. Alguns
exemplos utilizam aiquivos BTNL e imagens que estão uisponiveis nas
pastas html e images, iespectivamente.

{distribuição e termos de uso}
Este livio é uistiibuiuo ue acoiuo com a licença &'%()*+% &#--#$. /0('%12"*3%. 0
texto ueste livio, imagens e couigo-fonte ue exemplos e exeicicios são mantiuos e
atualizauos no iepositoiio http:¡¡github.com¡aigonavisbi¡LessCouise. Esta
veisão (1.u.u) foi ciiaua em 18 ue maiço ue 2u14.

{sobre o autor}
Beluei ua Rocha é piogiamauoi, esciitoi, piofessoi, atoi, músico e aitista
plástico. 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'.

{less} {1:intiouução }

4
{conteúdo resumido}
{1: |ntrodução } ................................................................................................... 8
{2: an|nhamento } ............................................................................................. 18
{3: var|áve|s } .................................................................................................... 26
{4: extend } ....................................................................................................... 31
{S: m|x|ns } ........................................................................................................ 41
{6: operações e funções } .................................................................................. 60
{7: |oops.guards } .............................................................................................. 7S
{8: cores } .......................................................................................................... 8S
{9: +|ess } .......................................................................................................... 96
{10: referônc|as } .............................................................................................. 108



{less} {1:intiouução }

S
{conteúdo em detalhes}

{1: |ntrodução } 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 Compilação 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 Compilação em tempo ieal 16
1.7 veisões e alteinativas 17
{2: an|nhamento } 18
2.1 Less é CSS, CSS não é Less 18
2.2 Aninhamento ue ueclaiações 18
2.S Comentáiios 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 vaiiáveis globais 26
S.2 Escopo e vaiiáveis locais 27
S.S vaiiáveis inteipolauas 29
{4: extend } 31
4.1 :extenu S1
4.2 Extensão múltipla S2
4.S Extensão com seletoies aninhauos SS
4.4 Sobieposição ue piopiieuaues S4
{less} {1:intiouução }

6
4.S Pseuuo-elementos e vaiiáveis SS
4.6 Coiiesponuência exata S6
4.7 Coiiesponuência 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 paiâmetios 44
S.S Sintaxes alteinativas (e pioblemáticas) 47
S.6 Nixins com númeio vaiiável 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 Agiegação ue valoies S8
{6: operações e funções } 60
6.1 0peiações aiitméticas 6u
6.2 0peiações usanuo uniuaues 62
6.S Aiieuonuamento e peicentagem 6S
6.4 Conveisão ue uniuaues 64
6.S Funções matemáticas e tiigonométiicas 6S
6.6 Funções que opeiam sobie coleções 67
6.7 Tiansfoimação e foimatação ue texto 68
6.8 Sintaxes pioblemáticas 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 Befinição ue coies 8S
=7979 XYB"*!(. 4% IJ$KL%. 4# &// =Q
=797: NJ$KL%. Z/; =U
8.2 Extiação ue componentes ue coies 88
=7:79 &#-B#$%$)%. X[\2 ==
{less} {1:intiouução }

7
=7:7: &#-B#$%$)%. Z/M % Z/; ==
=7:7A MJ-( =@
8.S 0peiações sobie coies inuiviuuais 9u
=7A79 /()J'(KE# @F
=7A7: MJ-*$]$!*( @9
=7A7A >()*^ @:
=7A7C O'($.B('S$!*( @A
8.4 0peiações ue combinação ue coies 9S
=7C79 /*-Y)'*!(. @A
=7C7: 2..*-Y)'*!(. @C
{9: +|ess } 96
9.1 Impoitação 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 Execução 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 0pções ue linha ue comanuo 1u6
{10: referônc|as } 108
1u.1 Especificações e uocumentação oficial 1u8
1u.2 Aitigos e exemplos 1u8
1u.S Tutoiiais não-oficiais 1u9
1u.4 Bibliotecas 1u9
1u.S Feiiamentas 11u

{less} {1:intiouução }

8
{1: !"#$%&'()% +
1.1 C que ó Less?
Less é um B'Y1B'#!%..(4#' CSS. Ele 6%'( CSS. E também uma %?)%$.E# uo CSS: um
uocumento CSS é um uocumento Less váliuo. Less aciescenta váiios iecuisos que
toinam mais eficientes a ciiação e manutenção ue folhas ue estilo uo CSS.
1.2 Þor que usar |ess?
Less não é necessáiio, mas Less também não quebia os pauiões existentes (não
uepenue ue supoite ue biowsei) e toina o CSS mais fácil ue mantei.
Bocumentos Less são bem mais cuitos que uocumentos CSS e geialmente têm
muito menos iepetição ue couigo. Alguns uos iecuisos que Less aciescenta ao
CSS incluem funções, vaiiáveis, mixins, conuicionais, escopo, aninhamento ue
blocos e outios iecuisos comuns em linguagens ue piogiamação. Less também
facilita a ciiação ue folhas ue estilo inuepenuentes ue biowsei e platafoima.
1.2.1 Var|áve|s
Less supoita constantes (que são chamauas ue +('*<+%*.). Atiavés uelas é
possivel ueclaiai um valoi (ex: uma coi, uil ou fonte) e ieusai esse valoi váiias
vezes na folha ue estilos, evitanuo a iepetição e facilitanuo a alteiação. Poi
exemplo:
@cor-base: #f74020;
.sec1 {
color: @cor-base;
border-color: @cor-base;
}
{less} {1:intiouução }

9
1.2.2 M|x|ns
Com Less é possivel utilizai uma coleção ue piopiieuaues ueclaiauas paia um
seletoi váiias vezes, simplesmente incluinuo o nome uo seletoi uentio ue outio
bloco. Esses seletoies são chamauos ue -*?*$..
Poue-se ainua ciiai mixins que iecebem paiâmetios, mixins que uefinem
vaiiáveis 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 serão inseridas aqui
}
As uuas baiias // iepiesentam um bloco ue comentáiio 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 iepetição ue couigo se também foi necessáiio aplicai estilos nos
outios elementos uo contexto:
.secao > div {
width: 560px;
}

.secao {
position: absolute;
}
Less aciescenta uma segunua sintaxe que evita a iepetição ue couigo em
situações como esta, e também ciia um escopo onue pouem sei usauas vaiiáveis
locais.
0s tiês blocos acima poueiiam sei ieuuziuos a um so bloco usanuo ueclaiações
aninhauas em Less:
{less} {1:intiouução }

1u
.secao {
position: absolute;
> div {
width: 560px;
.item {
color: blue;
}
}
}
1.2.4 Lxtensão
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 atiavés ua auição ue
.secao2 nas outias uuas ueclaiações acima:
.secao2, .secao1, .lateral {
background: url(images/bg.svg);
color: #f789a1;
}
.secao2, .tabela td td > p {
font-weight: bold;
text-decoration: underline;
}
.secao2 {
border: solid blue 1px;
}
Less faz esse tipo ue opeiação automaticamente com o pseuuo-seletoi :extend,
geianuo o CSS acima:
.secao2:extend(.lateral, .tabela td td > p) {
border: solid blue 1px;
}
1.2.S Cperadores e funções
Nuitas vezes piecisamos fazei contas em CSS paia alteiai posicionamentos e
coies. Less facilita isto aciescentanuo ao CSS a possibiliuaue ue se usai
opeiações aiitméticas, blocos conuicionais, blocos ue iepetição, funções
matemáticas e funções ue manipulação ue coies. Combinauo com o uso ue
{less} {1:intiouução }

11
vaiiáveis e mixins poue-se automatizai uiveisas taiefas iepetitivas e evitai usai
outias linguagens ue piogiamação paia geiai coies e uimensões.
@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. Ciiação uo aiquivo .less
2. Compilação uo aiquivo .less (geiação 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 página, poiém isto costuma sei ineficiente e poue fazei com que a
ienueiização ua página uemoie.
0m uocumento Less poue sei ciiauo em qualquei euitoi ue textos. váiias
feiiamentas ue uesenvolvimento Web populaies supoitam Less ou ue foima
nativa ou via plugin. Elas fazem a geiação uo CSS automaticamente.
Less Y CSS, então paia ciiai um uocumento .less poue-se simplesmente usai um
uocumento CSS e alteiai a sua extensão paia .less.
Bá uuas opções paia geiai CSS atiavés ue um uocumento Less:
1. 0sai o compilauoi lessc (linha ue comanuo)
2. 0sai compilauoies automáticos (lessc com opção --watch, compilauoies
giáficos, plugins)
{less} {1:intiouução }

12
1.4 Comp||ação
1.4.1 L|nha de comando
Em sistemas Winuows, Nac ou Linux, o Less é instalauo como aplicação
}avaSciipt (Noue.js) atiavés 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 veisão uo Less que está instalaua no seu sistema. Este
tutoiial assume que você está usanuo pelo menos a veisão 1.7.
Paia geiai um aiquivo CSS a paitii ue um uocumento Less, a sintaxe é:
lessc arquivo.less > arquivo.css
0 compilauoi lessc possui váiias opções uocumentauas no site oficial uo Less
em 0))Bfgg"%..!..7#'6. 0ma uas opções peimite configuiai a aplicação paia
monitoiai uocumentos .less ou pastas, e geiai o .css automaticamente a
caua alteiação.
1.4.2 Ierramentas gráf|cas
Se você não se sente muito à vontaue usanuo o teiminal, existe a opção ue
utilizai um compilauoi giáfico como "%..7(BB (>(! H/T ou h*$M%.. (h*$4#`.).
Eles peimitem configuiai um ambiente onue aiquivo seião compilauos e
iecompilauos sempie que foiem alteiauos, e não piecisam uo teiminal.

{less} {1:intiouução }

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

Também 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 váiios outios que têm plugins que fazem a compilação automática.
0m ambiente integiauo poue sei mais piouutivo poi tei iecuisos como busca e
substituição, euição ue BTNL, uepuiação ue }avaSciipt, que muitas vezes fazem
paite ue aplicações que usam Less.
0m euitoi populai que tem supoite a Less é o 24#8% \'(!3%)., que é usauo paia
aplicações Web em geial e é giatuito:
{less} {1:intiouução }

14

0 &'J$!0 é uma feiiamenta completa que peimite ciiai e euitai uocumentos Less
e também iealiza a geiação automática e compiessão ue CSS:

{less} {1:intiouução }

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 conteúuo ue um aiquivo
.less e obtei o iesultauo ua compilação em CSS.

1.S.1 1este do amb|ente
Escolha o seu ambiente ue uesenvolvimento piefeiiuo, e teste a sua instalação
ciianuo o aiquivo ue testes abaixo:
{less} {1:intiouução }

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||ação em tempo rea|
0 piogiama lessc e as feiiamentas acima listauas são pié-piocessauoies
estáticos. Isto quei uizei que eles compilam o Less geianuo um aiquivo CSS
estático que ueve sei caiiegauo em suas páginas Web.
você também 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 piouução, mas poue sei útil em uesenvolvimento.
Paia usai Less no biowsei, é pieciso caiiegai o sciipt less.js, que poue sei
baixauo ue https:¡¡github.com¡less:
<script src="less.js" type="text/javascript"></script>
Poue-se também 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 váiios uocumentos Less. Caua um seiá compilauo
inuiviuualmente, poitanto não é possivel compaitilhai vaiiáveis e outios
{less} {1:intiouução }

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 Versões e a|ternat|vas
Este cuiso foi piepaiauo e testauo com a veisão 1.7 uo Less. 0 Less não possui
uma especificação foimal e toua a uocumentação está uisponivel no site e no
uitBub uo piojeto. Nuitos uetalhes ua linguagem não estão uocumentauos. Se
você estivei usanuo uma veisão anteiioi uo Less, váiios exemplos poueião não
funcionai. Se estivei usanuo uma veisão mais nova, alguns comanuos poueião
sei uifeientes ou até mais simples.
/2// e /)i"J. são outios uois pié-piocessauoies ue CSS que têm objetivos
semelhantes a Less. Ambos têm sintaxes que são extensões uo CSS como o Less,
mas também 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 semelhanças com Less.
{less} {2:aninhamento }

18
{2: !"#"$!%&"'( !
Nesta seção aboiuaiemos um aspecto ua sintaxe uo Less que o uistingue uo CSS:
a possibiliuaue ue aninhai ueclaiações.
2.1 Less ó CSS, CSS não ó Less
0s iecuisos uo Less são )#4#. opcionais. Less é uma %?)%$.E# uo CSS. Sempie
poue-se usai CSS puio em uma página Less (e isto ueve sei feito, se foi mais
simples e eficiente). Tuuo que é CSS também é Less.
Poi outio lauo, CSS não é 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 extensão uo aiquivo paia .less.
Quanuo o aiquivo foi liuo pelo piocessauoi Less seiá geiauo um CSS
funcionalmente iuêntico. Ele talvez substitua algumas iepiesentações 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 alteiações
giauualmente, aplicanuo iecuisos uo Less como ($*$0(-%$)# 4% 4%!"('(KL%.,
vaiiáveis, funções, etc. Este piocesso é chamauo ue iefatoiação: ele alteia a
foima ue se expiessai iegias ue estilo sem alteiai o iesultauo. A melhoi maneiia
ue fazei iefatoiação é usanuo um euitoi que geie automaticamente o CSS, como
os que foiam apiesentauos no capitulo anteiioi.
2.2 An|nhamento de dec|arações
Less peimite que ueclaiações CSS sejam ($*$0(4(.. E uma foima alteinativa ue
expiessai ielacionamentos contextuais entie seletoies. Poi exemplo, as uuas
ueclaiações a seguii em CSS:
{less} {2:aninhamento }

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 ueclaiação aninhaua em Less, que
especifica seus ielacionamentos contextuais atiavés uo aninhamento:
.artigo {
border: solid red 1px;
font-size: 12pt;
.secao1 {
background-color: black;
color: white;
}
.secao2 {
background-color: white;
color: black;
}
}
Não 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 ueclaiação aninhaua acima iesulta em cinco ueclaiações:
.livro {
font-size: 10pt;
}
.livro .capitulo {
border: solid gray 1px;
}
.livro .capitulo .secao {
background-color: #eee;
}
.livro .capitulo .secao .titulo {
font-size: 120%;
{less} {2:aninhamento }

2u
}
.livro .capitulo .secao .corpo {
text-align: justify;
}
0(s) seletoi(es) ueclaiauos em um bloco exteino são 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 seião ambos ieesciitos em CSS como seletoies
contextuais uescenuentes ue .t1 p:
.t1 p .t2, .t1 p .t3 li {
color: blue;
}
Qualquei tipo ue contexto hieiáiquico poue sei iepiesentauo, como filho (!0*"4
.%"%!)#'T >, iimão 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 ueclaiações aninhauas é #B!*#$(". ueialmente elas aumentam a
legibiliuaue e facilitam a manutenção mantenuo juntas as iegias aplicauas em
seletoies que têm ielacionamentos hieiáiquicos que iefletem a estiutuia uo
BTNL. Nas não uevem sei usauas se uma ueclaiação CSS comum expiessai a
aplicação ue um estilo ue foima -(*. !"('( % !#$!*.(. Poi exemplo, se um
ielacionamento contextual longo apaiece uma única vez em CSS.
A ueclaiação CSS:
div .notes table .footnotes p {
color: red;
}
é bem mais concisa e claia que:
{less} {2:aninhamento }

21
div {
.notes {
table {
.footnotes {
p {
color: red;
}
}
}
}
}
Nas se houvei necessiuaue ue aplicai iegias a seletoies inteimeuiáiios ua
hieiaiquia, o uso ue seletoies aninhauos poue sei mais vantajoso. 0 impoitante é
sempie avaliai os beneficios ue usai ou não ueclaiações aninhauas em Less.
2.3 Comentár|os
Less é CSS, logo supoita comentáiios ue bloco CSS, no foimato /* ... */:
/* Este bloco de texto e as duas últimas propriedades
do ruleset abaixo serão ignoradas pelo browser */
.header {
color: cyan;
/* background: navy;
font-size: 16pt; */
}
Nas também supoita !#-%$)<'*#. 4% "*$0(, usanuo uuas baiias //. Este tipo ue
comentáiio peimite omitii tiechos ue couigo ua geiação uo CSS final, e não
contiibui paia aumentai o tamanho uo aiquivo CSS. 0 comentáiio inicia em //,
afeta apenas a linha em que foi uefiniuo a paitii uesse ponto, e so teimina no fim
ua linha. Não é possivel teiminá-lo antes.
// No CSS, o bloco a seguir terá apenas uma declaração de estilo
// Também não terá esta linha, nem a anterior
/* Mas estas linhas estarão presentes no CSS,
embora sejam ignoradas pelo browser */
.header {
color: cyan;
// background: navy;
}
Apenas os comentáiios ue bloco são pieseivauos no CSS final:
/* Mas estas linhas estarão presentes no CSS,
embora sejam ignoradas pelo browser */
.header {
color: cyan;
}
{less} {2:aninhamento }

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 & não 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 posição uos seletoies heiuauos,
mas se ele apaiecei -(*. 4% J-( +%^, ele '%B%)% esses seletoies, poi exemplo:
{less} {2:aninhamento }

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 não 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: '&lt;'}
&:after {Content: '/&gt;'}
}
Resultauo em CSS:
.tag:before {
Content: '&lt;';
}

.tag:after {
Content: '/&gt;';
}
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;
}
{less} {2:aninhamento }

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 seções 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 Concatenação 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 combinações 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 também aplicai classes aos seletoies:
{less} {2:aninhamento }

2S
.a, .b {
&& & {
color: darkred;
}
}
0 couigo acima piouuz oito combinações 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:vaiiáveis }

26
{3: !"#$%!&$' )
vaiiáveis peimitem aimazenai valoies que seião ieusauos muitas vezes. E muito
comum que ceitos valoies como coies, fontes, uimensões, etc. sejam iepetiuas
váiias vezes em uma folha ue estilo CSS. As vaiiáveis uo Less peimitem eliminai
essa iepetição. E possivel ainua iealizai #B%'(KL%. com vaiiáveis, passá-las como
aigumentos paia funções, etc.
vaiiáveis uevem tei a seguinte sintaxe:
@nome: valores;
0 nome poue sei qualquei nome que não seja uma uiietiva uo CSS (poi exemplo,
não poue sei import ou media). 0s valores pouem quaisquei valoies ou listas
ue valoies váliuas em CSS ou mesmo expiessões sobie valoies ou vaiiáveis.
3.1 Var|áve|s g|oba|s
0ma vaiiável poue sei 6"#8(" ou tei o escopo limitauo a um 8"#!#. vaiiávels
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 vaiiável 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á
{less} {S:vaiiáveis }

27
h1 {
font-family: "Times New Roman", "Times", serif;
height: 30em;
width: 15em;
color: #ffffff;
}
As vaiiáveis globais pouem sei ueclaiauas em qualquei paite uo uocumento
Less, mesmo 4%B#*. uos blocos que as utilizam. A oiuem em que são ueclaiauas é
iiielevante. Nas é uma boa piática auotai uma oiuem seqüencial e mantê-las no
inicio uo uocumento paia facilitai a legibiliuaue e manutenção uo couigo.
3.2 Lscopo e var|áve|s |oca|s
As chaves que uelimitam blocos limitam o escopo uas vaiiáveis. Se uma vaiiável
é 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 vaiiável ueclaiaua uentio ue um bloco não é visivel em blocos
exteinos ou no contexto global.
No exemplo abaixo há vaiiáveis em tiês niveis ue escopo. @global poue sei
usaua em qualquei lugai uo uocumento. @local-1 foi uefiniua uentio uo
contexto uo bloco header, então 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 vaiiável @local-2 uefiniua, que não 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 não existe @local-2
} // aqui não 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';
}
{less} {S:vaiiáveis }

28
0 piocessauoi Less exibe uma mensagem ue eiio e não geia o CSS se uma
vaiiável foi usaua foia uo contexto onue ela é ueclaiaua. Nas é
possivel 4%!"('(' vaiiáveis em um contexto global com um valoi qualquei,
e '%4%I*$*' essa vaiiável em um contexto local ueclaianuo-a novamente (mesmo
nome) com outio valoi. Nesse caso, o novo +("#' ua vaiiável seiá váliuo apenas
nesse contexto. Quanuo o bloco onue o valoi foi ieuefiniuo teiminai, a vaiiável
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 vaiiável @global foi ieuefiniua no bloco article, e o novo
valoi vale não apenas paia touas as vezes que a vaiiável foi usaua uentio uo
bloco, mas também em qualquei bloco ($*$0(4#, como section. 0
bloco aside está foia uo bloco poitanto vê o valoi oiiginal ue @global, pois a
ieuefinição 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 vaiiáveis globais, a #'4%- uas
ueclaiações uentio ue caua bloco é iiielevante. você poue ueclaiai uma vaiiável
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 vaiiáveis. A oiuem no mesmo bloco não 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";
}

{less} {S:vaiiáveis }

29
aside {
Content: @global;
}

@global: 'Global';
E impoitante entenuei esse funcionamento paia não 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
vaiiáveis não 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 vaiiável é
pieciso usai uma sintaxe uifeiente com o nome ua vaiiável (sem o @) entie
chaves ua foima @{variavel}.
0 exemplo abaixo ueclaia quatio vaiiáveis que são usauas ue uiveisas maneiias
uifeientes usanuo inteipolação:
• Como seletoi: vaiiável @classe;
• Como nome ue uma piopiieuaue CSS: vaiiável @transparencia;
• Como paite uo nome ue uma piopiieuaue: vaiiável @prop;
• Como paite uo stiing usauo em uma 0RL: vaiiável @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 vaiiáveis 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 vaiiável também poue contei o nome ue outia vaiiável simplesmente
incluinuo mais um @ antes uo nome (que ficaiá@@nome):
@the-end: "this is the end";
@end: "the-end";
{less} {S:vaiiáveis }

Su
.my-friend {
content: @@end;
}
0 iesultauo seiá:
.my-friend {
content: "this is the end";
}
Não 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 paiâmetio. 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 infoimação em um seletoi que heiua as ueclaiações ue
estilo uos seletoies passauos como paiâmetio.
Em Less paia obtei o iesultauo acima poue-se fazei:
.secao1:extend(.capitulo) {
content: 'Secao 1';
}
0 iesultauo piático paia a classe .secao1 seiá:
{less} {4:extenu }

S2
.secao1 {
content: 'Secao 1';
font: 12pt;
margin: 2px;
}
Nas a geiação uo CSS inteiio sepaiaiá esse iesultauo em uuas ueclaiações, paia
evitai a iepetição uas iegias ue .capitulo:
.capitulo, .secao1 {
font: 12pt;
margin: 2px;
}

.secao1 {
content: 'Secao 1';
}
4.2 Lxtensão mú|t|p|a
:extend poue sei aplicaua a váiios 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 combinação 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 extensão aplicaua a secao2 também poue sei esciita como:
.secao2:extend(.secao1):extend(.capitulo) {}
Ainua haveiá muita iepetição se foi necessáiio aplicai a mesma iegia ue
extensão a váiios 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 extensão a váiios seletoies usanuo um único :extend, obtenuo o mesmo
iesultauo uo bloco acima:
.secao1, .secao2, .secao3 {
&:extend(.capitulo, .prefacio);
}
0 bloco acima também 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 Lxtensão 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 também 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 também existam as seguintes ueclaiações, 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 não tiveiem piopiieuaues, são iemoviuos.
4.4 Sobrepos|ção de propr|edades
:extend não impeue a ciiação ue piopiieuaues uuplicauas. Elas pouem ocoiiei
no mesmo bloco ou em blocos uifeientes aplicauas ao mesmo seletoi. As iegias
sobie qual teiá pieceuência são as mesmas uo CSS: uentio ue um mesmo bloco,
se houvei uuas ueclaiações afetanuo a mesma piopiieuaue, vale a que foi
uefiniua poi último; uentio uo mesmo uocumento, piopiieuaues aplicauas a
seletoies iuênticos em blocos uifeientes, também vale a última.
No exemplo abaixo o seletoi .n7 tem background: orange, mas também tem
uois :extend que iião fazei com que o seletoi.n7 seja iepetiuo nos blocos .n1 e
.n2. Não faz uifeiença a oiuem em que os &:extend apaiecem no piimeiio bloco,
mas a posição uos blocos .n2 e .n1. 0 &:extend(.n2) foi chamauo
apos &:extend(.n1), poiém 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 conteúuo 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 tiês blocos uefinem a piopiieuaue backgiounu paia o mesmo
seletoi .n7, apenas a última uefinição seiá pieseivaua, e .n7 teiá a
piopiieuaue background: red.
Less também não impeue ou uetecta uuplicação se seletoies foiem estenuiuos
múltiplas 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 não alteia o funcionamento uo CSS, emboia seja uma uuplicação
uesnecessáiia.
4.S Þseudo-e|ementos e var|áve|s
0m seletoi poue tei outias pseuuo-classes além 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 vaiiável
inteipolaua:
@var: .secao; @{var}:extend(div) {}
Nas :extend não supoita (até o Less 1.6) vaiiáveis como aigumentos. Elas são
ignoiauas já que o piocessauoi não consegue achai o seletoi iepiesentauo pela
vaiiável. Não é mostiaua mensagem ue eiio e a falha ocoiie silenciosamente.
@var: .secao; div:extend(@{var}) {} // ISTO NAO FUNCIONA!
4.6 Correspondônc|a exata
Paia aplicai as extensões, :extend piecisa localizai seletoies que combinem com
os que foiam passauos como aigumentos. Poi 4%I(J"), essa coiiesponuência
piecisa sei %?()(. A foima impoita. Bois seletoies uifeientes que têm 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 exceção é conteúuo entie
aspas em pieuicauos:
[nome=abc], [nome='abc'] e [nome="abc"]
são consiueiauos equivalentes.
Tipos ue expiessões com seletoies que são equivalentes em CSS mas não são
consiueiauas coiiesponuências equivalentes em paiâmetios 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 não
seiá estenuiuo nos blocos abaixo:
a:before:hover, p:nth-child(n + 1), *.secao, *[nome] {
text-decoration: underline;
}

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] {
text-decoration: underline;
}

div {
color: purple;
}
Nas se foi auicionauo um espaço antes e outio uepois uo +, a combinação 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 {
text-decoration: underline;
}
div {
color: purple;
}
4.7 Correspondônc|a parc|a|
Se um seletoi uo tipo .a foi usauo como aigumento ue :extend, ele encontiaiá
coiiesponuência apenas com seletoies iuênticos .a. Seletoies c.a ou .a.b não
seião consiueiauos equivalentes.
0 seletoi .new-section abaixo não seiá estenuiuo pois .sec não tem
coiiesponuência %?()( 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 coiiesponuências 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 página 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 ciiação 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
ietângulos 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:

Então 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 posição uesejaua paia caua
ietângulo:
<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 iepetição uesnecessáiia. 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.
Então 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, não 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
vaiiáveis peimitem aimazenai valoies. Nixins peimitem aimazenai conjuntos
inteiios ue iegias, que pouem sei ieusauas em outios blocos.
A ueclaiação ue um mixin não uifeie em naua ue uma ueclaiação ue um seletoi
CSS ue classe ou iu. A uifeiença é que o mixin foi ciiauo paia sei usauo apenas na
folha ue estilos. Além uisso, mixins pouem tei paiâmetios.
0 mixin abaixo agiupa váiias iegias usauas em uifeientes seções 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 iepiesentação ue coies, uepenuenuo uo piocessauoi). 0 que faz esse
bloco um mixin é a I#'-( como ele é usauo. Agoia pouemos aplicá-lo em váiios
outios blocos, e evitai iepetii um monte ue ueclaiações:
.section {
.text-content-set;
h1 {
color: #00008b;
}
}
#footer {
.text-content-set; // este é o mixin
background-color: white;
}
0 iesultauo seiá:
{less} {S:mixins }

42
.text-content-set {
padding: 2px;
margin: 0 2px 0 2px;
border: solid #e1e1e1;
background-color: #808080;
color: #f0f0f0;
}
.section {
padding: 2px;
margin: 0 2px 0 2px;
border: solid #e1e1e1;
background-color: #808080;
color: #f0f0f0;
}
.section h1 {
color: #00008b;
}
#footer {
padding: 2px;
margin: 0 2px 0 2px;
border: solid #e1e1e1;
background-color: #808080;
color: #f0f0f0;
background-color: white;
}
Como não pietenuemos que o mixin seja usauo na página, pouemos ocultá-lo na
geiação final uo CSS ueclaianuo-o com paiênteses:
.text-content-set() { ... }
Assim apenas os elementos que usam o mixin fazem paite uo CSS final:
.section {
padding: 2px;
margin: 0 2px 0 2px;
border: solid #e1e1e1;
background-color: #808080;
color: #f0f0f0;
}
.section h1 {
color: #00008b;
}
#footer {
padding: 2px;
margin: 0 2px 0 2px;
border: solid #e1e1e1;
background-color: #808080;
color: #f0f0f0;
background-color: white;
}
E uma boa piática sempie usai paiênteses na ueclaiação ue mixins, mesmo que
eles não tenham paiâmetios.
Nixins pouem também usai seletoies ue iu (#nome) em vez ue seletoies ue classe
(.nome). Não faz nenhuma uifeiença, mas a convenção é 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 não é
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 paiâmetio 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
pieceuência uo cascaue e foiçai a aplicação ue uma ueclaiação ue estilo em um
seletoi. Se foi aplicaua em um mixin, touas as ueclaiações ue estilo contiuas no
mixin iião 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 parâmetros
Nixins pouem iecebei paiâmetios na foima ue vaiiáveis com escopo limitauo ao
bloco. As vaiiáveis têm seus valoies uefiniuos quanuo o mixin é usauo. Este tipo
ue mixin é muito bom paia ieusai uefinições com valoies uifeientes.
No exemplo abaixo, um mixin paia ieuimensionamento que iecebe tiês
paiâmetios:
{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 múltiplos paiâmetios sepaiauos poi B#$)#1%1+j'6J"( (viigulas
também pouem sei usauas mas pouem causai pioblemas em alguns casos). 0s
paiâmetios são selecionauos pela sua posição.
.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 vaiiável, que seiá usauo
caso os paiâmetios não sejam uefiniuos no uso.
No exemplo abaixo o segunuo paiâmetio uo mixin .pulo-vertical, @timing-
function possui um valoi 4%I(J") ease-out que seiá usauo se o segunuo
paiâmetio não estivei piesente.
.pulo-vertical(@height; @timing-function: ease-out) {
-webkit-transform: translateY(@height);
-webkit-animation-timing-function: @timing-function;
}
0 mixin é chamauo tiês vezes. Na piimeiia e última o segunuo paiâmetio é
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-transform: translateY(50px);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(100px);
-webkit-animation-timing-function: ease-out;
}
}
Nixins também pouem tei paiâmetios iuentificauos poi nomes. 0s nomes
sobiepõem a oiuem uos elementos. Isto peimite que mixins sejam chamauos
com -%$#. paiâmetios, já que os paiâmetios são *4%$)*I*!(4#..
0 mixin abaixo possui tiês paiâmetios 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 paiâmetios ou com menos ue tiês paiâmetios,
uesue que os paiâmetios sejam os piimeiios. Paia chamai o mixin com apenas o
último paiâmetio, é pieciso iuentificá-lo:
.image3 {
.reflexo(@final-color: black;);
}
Besta foima a oiuem uos paiâmetios não 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 piática usai mixins com paiâmetios iuentificauos, já que são mais
legiveis.
S.S S|ntaxes a|ternat|vas (e prob|emát|cas)
0 Less também peimite que se use +j'6J"( paia sepaiai os paiâmetios, mas ele
se confunue quanuo os aigumentos passauos também contém 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 também 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 não vai ieclamai, no entanto vai geiai o CSS incoiieto:
.section3 {
font-family: 'Times';
font-size: sans-serif;
}
Se foiem passauos tiês ou mais paiâmetios, o compilauoi não geia o CSS e exibe
uma mensagem ue eiio, mas se o númeio ue paiâmetios foi compativel, não
acontece eiio e o CSS é geiauo incoiietamente.
A solução é usai B#$)#1%1+j'6J"( paia sepaiai e teiminai os paiâmetios 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 paiâmetios 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 número var|áve| de argumentos
0 númeio ue paiâmetios aceitos no uso ue um mixin uepenue ue como ele foi
ueclaiauo. A tabela abaixo ilustia algumas situações. 0s aigumentos @arg,
@arg1 e @argn iepiesentam vaiiáveis quaisquei e ieticências "777" (iepiesentauas
abaixo em caiacteies piopoicionais) significam zeio ou mais aigumentos.
Poi outio lauo, a vaiiável @arguments, a vaiiável ... (tiês pontos, iepiesentauos
aqui em caiacteies fixos) e @+('*(+%"... (nome ue vaiiável seguiuo ue tiês
pontos) são vaiiáveis especiais uo Less que seião aboiuauas nesta seção.
{less} {S:mixins }

49
S|ntaxe usada na dec|araçao 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 númeio ue aigumentos passauos paia um mixin foi incompativel com o
númeio espeiauo ue aigumentos (segunuo a tabela acima), o compilauoi Less
não iiá geiai o CSS e exibiiá uma mensagem ue eiio. Nas não há veiificação ue
tipo ue uauos, poitanto se os aigumentos foiem enviauos na oiuem eiiaua, eles
seião atiibuiuos a vaiiáveis incoiietas e não iião geiai o CSS espeiauo. Poi essa
iazão é uma boa piática 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 vaiiável que existe em touos os mixins que aceitam
aigumentos, e contém )#4#. os aigumentos iecebiuos. Bentio uo mixin poue-se
tanto usai as vaiiáveis inuiviuuais como touas juntas na oiuem em que foiam
iecebiuas. As vaiiáveis ue @arguments pouem sei usauas em loops ou
uiietamente nas piopiieuaues. No CSS iesultante elas seião .%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 não passa paiâmetios e usa
os valoies 4%I(J"). A segunua alteia apenas um paiâmetio:
.sec1 {
.borda();
}
.sec2 {
.borda(@cor: red);
}
Este é o iesultauo em CSS:
.sec1 {
border: solid #000000 1px;
background: #808080;
}

.sec2 {
border: solid #ff0000 1px;
background: #ffffff;
}
Este outio mixin pie-uefine váiios 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 paiâmetios paia ieuefinii. 0 seletoi .sec3 abaixo
muuou apenas o teiceiio aigumento paia zeio:
.sec3 {
.margem(@bottom: 0);
}
0 mixin gaiante que a substituição em CSS ocoiieiá no lugai coiieto:
{less} {S:mixins }

S1
.sec3 {
margin: 2px 2px 0 2px;
}
S.6.2 A var|áve| ... (trôs pontos)
Nixins que iecebem um númeio vaiiável ue aigumentos pouem sei ueclaiauos
com ieticências (tiês pontos) uentio uos paiênteses:
.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 contém 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 paiâmetios e usai ... como _")*-#
aigumento. A vaiiável @arguments iiá contei )#4#. os aigumentos, inclusive os
que têm vaiiáveis ueclaiauas.
0 mixin abaixo gaiante que haveiá (# -%$#. J- aigumento váliuo:
.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 teião pieceuência:
.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 númeio minimo ue aigumentos é uefiniuo pelas vaiiáveis explicitas antes uos
tiês pontos. Caua uma iecebeiá o valoi passauo na posição coiiesponuente ou
pelo seu nome.
S.6.3 A var|áve| @!"#$...
@arguments sempie contém )#4#. os aigumentos. Nas é possivel tei em um
mesmo mixin aigumentos "an•nimos" e ueclaiauos.
Se em vez ue ... como último aigumento, o último aigumento foi uma +('*<+%"
seguiua ue ... sem espaço (@args..., poi exemplo), Less peimite que ela
ieceba um númeio ilimitauo ue aigumentos seja atiibuiua a ela. Assim é possivel
o acesso à lista contenuo apenas os aigumentos que $E# foiam explicitamente
ueclaiauos em vaiiáveis. Bentio uo mixin, a lista poue sei obtiua atiavés ue
iefeiência à vaiiável ueclaiaua sem as ieticências (poi exemplo @args).
0 mixin abaixo usa o piimeiio aigumento paia uefinii a piopiieuaue border. 0s
aigumentos iestantes (ilimitauos) são 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 {
border: solid #000000 1px;
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 seião executauos ue acoiuo com a coiiesponuência uo númeio ue
aigumentos com os que foiem passauos na chamaua. Se houvei ambiguiuaue, o
compilauoi não 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 não sabeiia uistinguii entie o piimeiio ou o segunuo, já que ambos
são compativeis com um aigumento.
{less} {S:mixins }

S4
Resultauo em CSS:
.sec3 {
background: black;
color: white;
}
.sec4 {
background: #202020;
color: #dfdfdf;
}
.sec5 {
background: #804020;
color: #7fbfdf;
}
Poue-se também selecionai mixins ue mesmo nome com B(']-%)'#. I*?#..
0s mixins .caixa() abaixo têm o piimeiio paiâmetio fixo que é usauo paia
uistingui-los. 0 segunuo paiâmetio é vaiiável e poue sei omitiuo. 0 último
mixin .caixa() iecebe uois paiâmetios 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 paiâmetios fixos,
este também seiá selecionauo e as piopiieuaues seião -*.)J'(4(. (sem
nenhuma gaiantia que não haveiá iepetição).
.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-base(2px; @cor);
}

.caixa(pequena; @cor:black) {
.caixa-base(1px; @cor);
}

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

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

{less} {S:mixins }

SS
.sec2 {
.caixa(pequena;red);
}
Além uo mixin que contém 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 paiâmetio fixo poue sei aimazenauo em uma vaiiável 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;
border: solid #000000 4px;
position: absolute;
top: 0;
left: 0;
}
S.8 M|x|ns para CSS mu|t|-browser
Nixins são otimos paia encapsulai piopiieuaues uepenuentes ue biowsei. Essas
piopiieuaues têm um piefixo piopiietáiio 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 númeio 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 geiação 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
vaiiáveis uefiniuas no coipo ue mixins têm seu escopo piopagauo no bloco que
faz a chamaua, ou seja, os valoies uessas vaiiáveis pouem sei liuas no bloco
uestino.
Poi exemplo, o mixin abaixo uefine sete vaiiáveis. Quatio como paiâmetios 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 vaiiáveis que foiam ueclaiauas no coipo são +*.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 vaiiáveis 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 conveisão 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 conveisões:
.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 funções matemáticas e ue conveisão que fazem paite uo
Less e seião 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 Agregação 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, é necessáiio incluii um sinal + tanto na piopiieuaue ueclaiaua no
mixin, quanto na piopiieuaue ueclaiaua no seletoi afetauo.
Poi exemplo, o mixin abaixo uefine uma tiansição 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 à tiansição:
.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:opeiações e funções }

6u
{6: !"#$%&'#( #
!"#$%&' )
Neste capitulo seião exploiauos iecuisos uo Less que peimitem iealizai
opeiações matemáticas e ue tiansfoimação ue uauos, opeiações conuicionais e
loops.
6.1 Cperações ar|tmót|cas
Less peimite iealizai opeiações matemáticas entie valoies numéiicos e coies,
levanuo em conta as uniuaues em que são ueclaiauas e fazenuo conveisão
automática quanuo possivel.
As expiessões geiam CSS %.)<)*!#, que uifeie ua função calc() uo CSSS (que
também é capaz ue iealizai opeiações matemáticas), ou uas opeiações em
}avaSciipt que pouem opeiai uinamicamente. Less noimalmente não tem acesso
à estiutuia B0N ua página que iiá iecebei o estilo (é possivel fazei isto com Less
senuo piocessauo no biowsei). Noimalmente Less é apenas um piocessauoi
que 6%'( CSS estático, poitanto toua a matemática iiá seivii paia geiai um stiing
estático. Ainua assim é bastante útil paia iealizai alinhamentos,
uimensionamento, manipulação ue coies, tempoiização ue animações,
uistiibuição ue giauientes, calculo uo tamanho ue fontes, etc.
As expiessões pouem sei usauas uiietamente na atiibuição ue valoies a
piopiieuaues, na uefinição ue vaiiáveis e pouem incluii outias vaiiáveis. Paia
evitai ambigüiuaues, é iecomenuável escievei as expiessões entie paiênteses e
ue piefeiência iealizá-las em vaiiáveis. Esta iecomenuação também gaiantiiá o
funcionamento em veisões futuias ue Less.
{less} {6:opeiações e funções }

61
0s opeiauoies que pouem sei usauos em expiessões matemáticas são os
mesmos opeiauoies básicos encontiauos nas linguagens ue piogiamação:
• * multiplicação
• / uivisão
• + soma
• - subtiação
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 opeiações também têm a mesma pieceuência uas linguagens ue
piogiamação: calculauos ua esqueiua paia a uiieita, mas com multiplicação,
iesto e uivisão tenuo piioiiuaue sobie auição e subtiação. A pieceuência poue
sei alteiaua com o uso ue paiênteses. Removenuo os paiênteses uo exemplo
acima, o iesultauo é outio:
@margem: (@parte1 + @parte2 / 2 * @borda - 0.5);
Resultauo:
.sec1 {
margin: 29.5px 29.5px;
}
Eiios ue matemática $E# .E# 4%)%!)(4#. pelo pié-piocessauoi Less. A uivisão 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;
}
{less} {6:opeiações e funções }

62
Resulta neste CSS incoiieto:
.sec3 {
font-size: -8pt; margin: 0px Infinitypx;
}
6.2 Cperações usando un|dades
0peiações aiitméticas pouem usai e geialmente utilizam uniuaues. Se em uma
expiessão matemática nenhum uos númeios 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 númeios ue uma expiessão tiveiem mais ue uma uniuaue, e as uniuaues
foiem uifeientes, elas poueião sei conveitiuas automaticamente .% I#'%-
!#-B()j+%*. e .% (. #B%'(KL%. I#'%- 4% .#-( (+) % .J8)'(KE# (-). A B'*-%*'(
uniuaue usaua na expiessão seiá a uniuaue uo númeio 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
{less} {6:opeiações e funções }

6S
0niuaues uo CSS não listauas na tabela acima (px, em, rem, etc.) $E# B#4%- .%'
-*.)J'(4(.. Pouem sei usauas em expiessões contenuo númeios ua mesma
uniuaue ou com númeios sem uniuaue.
0bseive o efeito ua conveisão automática ue uniuaues nas expiessões abaixo.
.sec6 {
padding: (1cm + 1mm) (1mm + 1cm) (1pt + 1pc) (1m + 1in);
duration: (2s + 2ms);
margin: (1px + 1rem); // incompatíveis
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 combinações piouuziião iesultauos incoiietos e uevem sei evitauas. Se
foiem iealizauas opeiações entie giupos não compativeis, ou opeiações ue
multiplicação ou uivisão envolvenuo númeios com uniuaues uifeientes, os
valoies seião multiplicauos .%- !#$.*4%'(' (. J$*4(4%., e a uniuaue geiaua no
final poue sei tanto a piimeiia (em uivisão) como a última (em multiplicação).
.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 funções ceil() (teto), floor() (piso) e round()
(aiieuonua) que eliminam a paite uecimal ue um númeio ue ponto-flutuante
segunuo uifeientes ciitéiios, além ue percentage() que conveite o valoi em
peicentagem.
{less} {6:opeiações e funções }

64
Função Recebe Retorna
ceil(n)
númeio Pioximo inteiio. ceil(S.1) geia 6
floor(n)
númeio Inteiio anteiioi. flooi(S.9) geia S
round(n)
númeio Inteiio aiieuonuauo.
iounu(S.4) geia S, iounu(S.S) geia 6.
percentage(n)
númeio Númeio 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 Conversão de un|dades
Nem sempie é possivel ou iecomenuauo usai tiansfoimação automática ue
uniuaues. ƒs vezes é uesejável aciescentai uma uniuaue em um númeio apos a
iealização ue cálculos, ou ainua tiocai a uniuaue sem fazei conveisão. Buas
funções seivem a esse pioposito:
Função Recebe Retorna
convert(n, u)
n = númeio (com ou sem
uniuaue),
u = uniuaue compativel
Númeio conveitiuo na nova
uniuaue:
convert(1in, cm)geia 2.54cm
unit(n, u)
n = númeio (com ou sem
uniuaue),
u = uniuaue
Númeio iecebiuo qualificauo
com a uniuaue passaua como
paiâmetio.
unit(1in, cm) geia 1cm
{less} {6:opeiações e funções }

6S
Se as uniuaues passauas paia convert() não foiem compativeis ele funcionaiá
igual a unit() simplesmente copianuo o mesmo valoi e tiocanuo a uniuaue. A
função convert() $E# .JB#')( pixels (px), em ou rem.
0s exemplos abaixo ilustiam o uso uas funções convert() e unit() em váiias
situações e compaiauas à conveisões automáticas incoiietas em expiessões:
@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 Iunções matemát|cas e tr|gonomótr|cas
Less possui váiias funções matemáticas e tiigonométiicas que são úteis paia
calculai valoies usauos em alinhamentos, paiâmetios paia animações 2B e SB,
tiansições, conveisão ue cooiuenauas, métiicas ue fontes, filtiagem e
composição ue coies, etc. evitanuo a necessiuaue ue usai }avaSciipt quanuo
piecisa-se apenas ue valoies estáticos.
As funções estão ielacionauas na tabela abaixo.
0s valoies passauos pouem sei númeios, vaiiáveis que contenham númeios ou
outias funções que ietoinem númeios.
A uniuaue 4%I(J") paia ângulos é iauianos (rad) € é a uniuaue uos valoies
ietoinauos pelas funções tiigonométiicas. Nas na chamaua ue funções, os
paiâmetios pouem sei qualificauos com uma uniuaue. Se os valoies ietoinauos
foiem compiimentos eles seião númeios (sem uniuaues).
Função Recebe Retorna
sin(a)
ângulo seno uo ângulo
asin(c)
compiimento ângulo (inveiso uo seno )
{less} {6:opeiações e funções }

66
Função 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 = númeio, p = potência númeio elevauo à potência
sqrt(n)
númeio iaiz quauiaua
mod(n,d)
n = nominauoi, d = uenominauoi mouulo (iesto)
abs(n)
númeio 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 ciicunfeiências:
.circle-mixin(@radius, @x, @y) {
@area: pi() * pow(@radius, 2);
@circunference: 2 * pi() * @radius;
}
{less} {6:opeiações e funções }

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';
}
Cálculo ue potência, iaiz quauiaua, iestos, númeios 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 Iunções que operam sobre co|eções
Less possui algumas funções que opeiam sobie "*.)(.. 0ma lista é um conjunto ue
valoies sepaiaua poi viigulas ou espaços. Nuitas piopiieuaues uo CSS e
seletoies pouem sei tiatauos como listas, e elas pouem sei usauas em loops.
Função Recebe Retorna
length(a)
a = lista ue valoies o númeio ue elementos ua
lista
extract(a, p)
a = lista ue valoies,
p = posição
o valoi ua lista contiuo na
posição infoimaua
{less} {6:opeiações e funções }

68
Função Recebe Retorna
min(c)
c = lista ue númeios
sepaiaua poi viigulas
o menoi númeio ua lista
max(c)
c = lista ue númeios
sepaiaua poi viigulas
o maioi númeio ua lista
0 exemplo abaixo ilustia o uso ue váiias funções 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 1ransformação e formatação de texto
Less ofeiece algumas funções que auxiliam na constiução ue stiings ue texto
foimatauo e conveisão ue texto em númeios, coies, uils, etc. Atiavés ueles é
possivel supiimii váiias limitações uo Less e geiai CSS liteialmente.
Suponha que temos as seguintes vaiiáveis:
@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:
{less} {6:opeiações e funções }

69
background: url(http://www.test.com/app/images/pattern%205.png);
Poueiiamos tentai concatenai as vaiiáveis assim:
.sec8 {
background: url(@docroot '/images/' @image-name);
}
Nas o piocessauoi Less ieclama e não peimite. Piecisamos usai inteipolação ue
vaiiáveis 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 não é exatamente o que queiemos. Piecisamos conveitei o espaço no nome
uo aiquivo em %20 e iemovei as aspas.
A iemoção uas aspas poue sei feita com a função e() ou pelo opeiauoi ~. São
sin•nimos. Tanto faz usai um como outio. Esta função conveite o stiing iecebiuo
em uma iepiesentação nativa, que na piática significa iemovei as aspas uo
iesultauo final geiauo em CSS: A conveisão 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 veisátil já que a função e() não é 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 espaço uo nome ua imagem no foimato J'"1%$!#4%4: %20.
Isto poue sei feito com a função escape, que iequei um stiing:
.sec8 {
@image-escaped: escape(@image-name);
background: url(~'@{docroot}/images/@{image-escaped}');
}
{less} {6:opeiações e funções }

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 estão listauas as funções e opeiauoies ue manipulação ue stiing
uisponiveis em Less:

Função ou
operador
O que recebe O que faz
e('s') ou ~'s'

's' = stiing Conveite stiing em iepiesentação nativa uo
CSS (iemove as aspas uo CSS geiauo).
Quaisquei vaiiáveis inteipolauas uentio uo
stiing são piocessauas.
Sem o uso ueste opeiauoi, o iesultauo em
CSS mantém 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 são ieseivauos em 0RLs,
onue h é um uigito hexauecimal entie 0 e f.
0RL-encouing $E# substitui:
,, /,?, @, &, +, ', ~, !, $.
D?%-B"#:
encode('São Paulo')
geia
S%C3%A3o%20Paulo
{less} {6:opeiações e funções }

71
Função ou
operador
O que recebe O que faz
%('s', args...)

's' = stiing com
paiâmetios ue
substituição,
args... = valoies ue
substituição
%a,%A, %s, %S,%d, %D
Peimite a ciiação ue stiings foimatauos com
paiâmetios ue substituição (uma veisão
ultia-simplificaua uo printf uo C).
0s paiâmetios ue substituição maiúsculos
fazem escape() automático.
%a¡%A e%d¡%D são 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 = substituição,
f = flags
Substitui um pauião ue expiessão 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 iepiesentação 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
função e() ou o opeiauoi ~:
~'#ff0000' geia #ff0000
{less} {6:opeiações e funções }

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|emát|cas
vimos que o uso ue expiessões aiitméticas usanuo uniuaues incompativeis (ou
expiessões ue uivisão e multiplicação com uniuaues uifeientes) geiam
iesultauos incoiietos e uevem, poitanto, sei evitauos. 0utios pioblemas suigem
na ambigüiuaue ueviuo ao significauo uuplo ua 8(''( / e uo %.B(K#. Alguns
uesses pioblemas pouem sei iesolviuos com o uso ue paiênteses.
0 tiecho ue couigo abaixo inclui váiias piopiieuaues que necessitam pieseivai a
8(''( no CSS. 0 Less iuentifica essas piopiieuaues e não iealiza a opeiação,
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;
}
}
{less} {6:opeiações e funções }

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 não foi tiatauo como uma uivisão, coiietamente,
mas o min-height também não, emboia o valoi aceito poi ele seja númeio.
Bentio uo bloco .section a piopiieuaue margin-top teve o valoi 16¡1u
tiansfoimauo em 1.6, font-size uiviuiu 12pt poi 36pt mas font, que aceita no
CSS o valoi 12pt/36pt não iealizou a uivisão.
E se você iealmente quisesse iealizai a opeiação ue uivisão em aspect-
ratio e font. E também a subtiação ue min-height. Neste caso, basta envolvei
a expiessão entie paiênteses que o Less iiá entenuei que ela ueve sei tiataua
como expiessão matemática:
@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 espaço ele também poue sei iesolviuo mas não com
paiênteses. E pieciso usai uma notação que não seja ambigua. Se um valoi ue
piopiieuaue aceita quatio númeios sepaiauos poi espaços, o Less so iiá tiatai os
valoies como expiessão matemática .% $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, então Less
iiá tiatá-los assim. }á os valoies ue margin não pouem sei tiatauos como valoies,
{less} {6:opeiações e funções }

74
pois um - não vale como valoi, e +5- é ilegal, mas ainua é possivel encontiai 4#*.
valoies, então o iesultauo é:
header, footer {
padding: -5 -10 5 -20;
margin: -15 -15;
}
Se a intenção foi a iealização ua expiessão aiitmética, o sinal negativo não poue
estai junto uo númeio se houvei um espaço antes. Tem que ficai claio que é uma
expiessão:
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 seião exploiauos iecuisos uo Less que peimitem iealizai
opeiações 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
opeiações conuicionais iealizauas sobie os valoies iecebiuos. São chamauos
ue -*?*$ 6J('4.. Atiavés ueles é possivel tomai uecisões ue foima similai a
expiessões *I e *Ig%".% existentes em linguagens ue piogiamação.
A expiessão conuicional é iepiesentaua poi um )%.)% seguinuo a palavia-
chave when ('quanuo'). Assim poue-se iepiesentai expiessões uo tipo „uefina o
mixin x kJ($4# a expiessão y foi veiuaueiia„ usanuo a seguinte sintaxe:
.mixin(@parametros) when (condição 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));
}
{less} {7:loops.guaius }

76
Resultauo em CSS:
.noite {
background: #000000;
color: white;
}
.dia {
background: #ffffff;
color: black;
}
vale lembiai que os mixins conuicionais geiam &// %.)<)*!#. Em Web sites
iesponsivos muitas vezes o que se ueseja é um compoitamento uinâmico.
0sanuo -%4*( kJ%'*%. é possivel contiolai o efeito uo CSS em uifeientes
uispositivos, iesoluções e uimensões 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 vaiiável, é na veiuaue aplicauo com um valoi estático ($)%. ua
compilação uo Less:
.sec {
.skin(600px);
}
e geia o CSS abaixo, *$+('*<+%".
.sec {
column-count: 2;
}
Paia um Web site iesponsivo, o iueal é uefinii o númeio ue colunas ue acoiuo
com a laiguia ue tela uo uispositivo em tempo ieal, que é possivel atiavés 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;
}
}
{less} {7:loops.guaius }

77
7.1.1 Cperadores cond|c|ona|s
Paia testai conuições 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 Inversão de uma cond|ção
Paia *$+%')%' o iesultauo ue um teste, poue-se usai when not, que inveite o
iesultauo ua expiessão conuicional.
No exemplo abaixo, o mixin testa se a vaiiável iecebiua é ou não um númeio e
chama o mixin aujust que uefine uma piopiieuaue se o valoi ietoinauo $E# foi
falso (as palavias true e false são ietoinauas poi funções como isnumber mas
elas não têm 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 não é númeio. 0 iesultauo em CSS é:
.section {
font-size: 12pt;
font-weight: bold;
}
7.1.3 Detecção de t|pos e un|dades
Além ue isnumber existem quatio outias funções usauas paia testai o tipo ue um
valoi:
{less} {7:loops.guaius }

78
Função 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 contiáiio.
iskeyword(s)
stiing Quaisquei nomes, sejam ue seletoies, vaiiáveis,
comanuos uo less, ietoinam true. Retoina
false se valoi foi stiing, coi, númeio ou
uil; true caso contiáiio.
isnumber(s)
stiing true se valoi foi um númeio: 12, 12.S, 12‚, 12cm,
12¡S6. false se não foi.
isstring(s)
stiing true se o valoi estivei entie aspas ou
apostiofes. false se não foi stiing.
isurl(s)
stiing true se valoi foi uma uil. false se não foi.
Alguns exemplos usanuo as funções 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 funções que ietoinam true ou false ue
acoiuo com as uniuaues que os qualificam:
{less} {7:loops.guaius }

79
Função Recebe Retorna
ispixel(n)
númeio true se uniuaue é px;
false caso contiáiio.
isem(n)
númeio true se uniuaue é em;
false caso contiáiio.
ispercentage(n)
númeio true se uniuaue é %;
false caso contiáiio.
isunit(n,u)
n = númeio,
u = uniuaue
true se o númeio está na uniuaue
especificaua; false caso contiáiio.
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|nação de expressões cond|c|ona|s
váiias expiessões conuicionais pouem sei combinauas com a viigula e têm efeito
somatoiio HX (l#Jl "m6*!#), ou seja, se qualquei uma uas expiessões iesultai em
veiuaueiia, a expiessão inteiia é aceita.
skin(@cor, @tambase) when (lightness(@cor) > 50%), (@tambase > 20) {
font-size: convert(@tambase, "pt");
color: darken(@cor, 80%);
background: @cor;
}

{less} {7:loops.guaius }

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;
background: #101010;
}
.sec3 {
font-family: serif;
}
0 efeito multiplicauoi 2cW (l%l "m6*!#) na combinação ue expiessões é 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 {
font-family: monospace;
.mix(red, 2pt); // true E false = false
}
Resultauo em CSS:
.sec4 {
font-family: monospace;
margin: 2px;
color: #ff0000;
}
.sec5 {
font-family: monospace;
}
{less} {7:loops.guaius }

81
A função default() é usaua como cláusula %".% ue um mixin guaiu. Repiesenta
uma conuição 4%I(J") que seiá executaua .% $%$0J- #J)'# mixin conuicional ue
mesmo nome¡paiâmetios 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 {
font-family: monospace;
.mix(red, 2px); // true E true = true
}
.sec5 {
font-family: monospace;
.mix(red, 2pt); // true E false = false
}
0btém-se o CSS:
.sec4 {
font-family: monospace;
margin: 2px;
color: #ff0000;
}
.sec5 {
font-family: monospace;
margin: 0;
color: black;
}
7.2 Se|etores cond|c|ona|s
Expiessões conuicionais não são exclusiviuaue uos mixins. Elas pouem sei
aplicauas uiietamente nos seletoies CSS.
@debug: true;

div when (@debug) {
border: solid red 1px;
}
Quanuo @debug foi tiue boiuas veimelhas seião colocauas em volta ue caua div:
div {
border: solid red 1px;
}
{less} {7:loops.guaius }

82
Esse tipo ue expiessão so poue sei aplicaua em um único seletoi ue caua vez.
Paia aplicai a váiios seletoies, ueve-se usai o &:
& when (@debug) {
section, footer, aside, div {
border: solid red 1px;
}
p:before {
content:'[P]';
}
p:after {
content:'[/P]';
}
}
Resultauo em CSS:
section, footer, aside, div {
border: solid red 1px;
}
p:before {
content: '[P]';
}
p:after {
content: '[/P]';
}
7.3 M|x|ns recurs|vos (|oops)
Loops em LESS são chamauas '%!J'.*+(. ue mixins, ou seja, o mixin chama ele
mesmo.
Paia que um loop não seja infinito, é necessáiio que a caua iepetição uma
conuição seja testaua e que o valoi testauo -J4% ue foima que em algum
momento a conuição seja falsa, e o loop tenha fim.
0 loop abaixo iepete um númeio ue vezes uefiniua quanuo o mixin foi chamauo.
A caua iepetição, 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 é:
{less} {7:loops.guaius }

8S
.sec2 {
margin: 1;
margin: 2;
margin: 3;
margin: 4;
}
Loops também pouem sei usauos paia geiai blocos inteiios ue seletoies. 0 mixin
abaixo peimite geiai até S seções, 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 seqüência ue keyfiames paia
animação:
@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));
}
{less} {7:loops.guaius }

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 váiias funções paia geiação, combinação, filtiagem e mesclagem ue
coies. A maioiia geia como iesultauo uma iepiesentação ue coi em CSS no
foimato hexauecimal #rrggbb.
8.1 Def|n|ção de cores
váiias uas funções ue uefinição ue coies já existem em CSS (ex: rgb(r,g,b)),
mas algumas so existem uesue veisões mais iecentes e não têm supoite em
biowseis antigos (hsl, hsla, etc.). 0 Less conveite essas funções em foimatos
hexauecimais #rrggbb ou na função 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 função rgb no CSS (em vez ue conveitei
paia #hhhhhh), é necessáiio incluii o valoi %$)'% (.B(. e uepois iemovê-las uo
CSS geiauo atiavés 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 kóp||cas de funções do CSS
As funções abaixo são iéplicas uas funções supoitauas poi CSS1 e 2 (rgb, rgba)
e CSSS (hsl, hsla). Touas geiam couigo em foimato #hhhhhh ou
rgba(r,g,b,a).
As funções rgb e rgba geiam uma coi a paitii ue componentes ue luz +%'-%"0(,
+%'4% e (^J" (númeios ue u a 2SS, ou u a 1uu‚), mais um componente ("I(
(tianspaiência) entie u e 1 (u a 1uu‚).
RuB é um espaço 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 númeio entie u e 1 (u - 1uu‚) que iepiesenta a
satuiação ua coi;
• +),&#"$%%: um númeio 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 começa e teimina em veimelho, assim poue-se ultiapassai o valoi máximo:
• uueg, S6uueg, 72uueg, ... = veimelho
• 12uueg, 48uueg, ... = veiue
• 24uueg, 6uuueg, ... = azul
Função Recebe Retorna
rgb(r,g,b)
númeios (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 = númeios
(u-2SS) ou ‚,
a = númeio entie u
e 1 ou peicentagem
A mesma função 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 = númeios
entie u e 1 ou ‚
Coi em hexauecimal.
D?%-B"#:
hsl(360,1,0.5) geia #ff0000
{less} {8:coies }

87
Função Recebe Retorna
hsla(h,s,l,a)
h = ângulo,
s,l,a = númeios
entie u e 1 ou
peicentagem
Função igba uo CSS coiiesponuente.
D?%-B"#.:
hsla(0,1,0.5,0.5) geia
rgba(255, 0, 0, 0.5)
8.1.2 Iunções nSV
0 espaço ue coies BSv tem como piincipal uifeiença em ielação ao BSL o
componente ue intensiuaue ue luz, que é chamauo ue ;("J% (ou
Biilho¡Biightness) 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 funções não existem no CSS, poitanto são conveitiuas em #hhhhhh ou
rgba pelo piocessauoi Less.
Função Recebe Retorna
hsv(h,s,v)
h = ângulo,
s,v = númeios 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 = númeios
entie u e 1 ou ‚
função 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);
background-color: #408040;
color: rgba(64, 64, 128, 0.5);
}
8.2 Lxtração de componentes de cores
Estas funções iecebem coies e extiaem seus componentes inuiviuuais nos
espaços RuB, RuBA, BSL, BSLA, BSv e BSvA. 0s componentes são ietoinauos
como númeios uecimais.
8.2.1 Componentes kG8A
Função 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)
númeio valoi uo componente alfa (tianspaiência) (a):
alpha(#ff8844) geia 1,
alpha(fade(@cor, 50%)) geia u.S
8.2.2 Componentes nSL e nSV
Função Recebe Retorna
hue(c)
coi númeio inteiio com o ângulo ua matiz uo
espaço BSL.
hue( #8080ff ) geia 240
saturation(c)
coi peicentagem ue satuiação no espaço BSL.
saturation(#8080ff) geia 100%
lightness(c)
coi peicentagem ue luminosiuaue no espao BSL.
lightness(#8080ff) geia 75%
{less} {8:coies }

89
Função Recebe Retorna
hsvhue(c)
coi númeio inteiio com o ângulo ua matiz no
espaço BSv.
hsvhue(#8080ff) geia 240
hsvsaturation(c)
coi peicentagem ue satuiação no espaço BSv.
hsvsaturation(#8080ff) geia 50%
hsvvalue(c)
coi peicentagem ue biilho no espaço 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 função luma ietoina um peicentual que inuica a luminância ielativo ue uma
coi (biilho peiceptivel) ue acoiuo com a iecomenuações WSC ue accessibiliuaue.
Função 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 Cperações sobre cores |nd|v|dua|s
Estas funções alteiam os componentes ue coies inuiviuuais e ietoinam uma coi
mouificaua, mais claia ou escuia, mais ou menos satuiaua, com a matiz ou
tianspaiência alteiauas.
8.3.1 Saturação
Estas funções alteiam a satuiação e usam o espaço ue coies BSL.
Função Recebe Retorna
saturate(c,p)
c = coi,
p = peicentagem
Coi com a satuiação aumentaua na
peicentagem inuicaua (até a satuiação
máxima).
D?%-B"#.:
saturate(#808180,20%) geia #679a67
saturate(#808180,100%)geia #02ff02
desaturate(c,p)
c = coi,
p = peicentagem
coi com a satuiação uiminuiua na
peicentagem inuicaua (até a satuiação
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|nânc|a
Estas funções toinam a coi mais claia ou mais escuia.
Função Recebe Retorna
lighten(c,p)
c = coi,
p = peicentagem
Coi com a luminância aumentaua na
peicentagem inuicaua (até a máxima).
darken(c,p)
c = coi,
p = peicentagem
Coi com a luminância 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 {
background-color: #800000;
}
8.3.3 Mat|z
A função spin iecebe um ângulo que é aplicauo sobie o ciiculo ou cone ue coies,
vaiianuo a matiz.
Função Recebe Retorna
spin(c,a)
c = coi,
a = ângulo
Coi coiiesponuente ao ângulo.
veimelho = u = S6u.
veiue = 12u,
Azul = -12u ou 24u.
valoies múltiplos ue S6u teião 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 1ransparônc|a
Função Recebe Retorna
fadein(c,p)
c = coi,
p = peicentagem
Biminui a tianspaiência '%"()*+(
somanuo a peicentagem ao valoi alfa (até
o máximo).
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 tianspaiência '%"()*+(
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 tianspaiência
(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 Cperações de comb|nação de cores
As opeiações ue combinação ue coies pouem sei classificauas em simétiicas
(onue a oiuem uas coies não é ielevante) e assimétiicas (onue a oiuem impoita).
8.4.1 S|mótr|cas
Função 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
Função Recebe Retorna
average(c1, c2)
2 coies Nistuia uuas coies utilizanuo a méuia 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 multiplicação
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 multiplicação 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 subtiação ua segunua coi ua
piimeiia, canal poi canal. Subtiação 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|mótr|cas
Função 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
Função 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 contém topicos avançauos ou menos usauos que não foiam
aboiuauos em mouulos anteiioies.
9.1 Importação de est||os
Bifeientemente uo CSS, uiietivas @import pouem sei colocauas em qualquei
lugai uo aiquivo Less. A geiação uo CSS iiá posicioná-las no inicio uo aiquivo
coiietamente (emboia seja uma boa piática sempie mantê-los no inicio uo
aiquivo).
A sintaxe é a mesma uo CSS:
@import "documento.css";
Less também 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 extensão uo aiquivo foi .css, o less iiá tiatá-lo como um @import comum
uo CSS, e simplesmente copiai a ueclaiação paia o CSS iesultante.
Se foi qualquei outia extensão, o aiquivo seiá incoipoiauo e tiatauo como senuo
Less.
Se o aiquivo foi impoitauo sem extensão, o less iiá anexai uma extensão .less a
ele e buscai incoipoiai o aiquivo.
Poue-se ieuefinii o compoitamento uefault uo impoit com seis opções que são
passauas entie paiênteses 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 extensão)
• )"+)"$: inclui o conteúuo uo aiquivo no CSS final, mas não o piocessa
• +$%%: tiata o aiquivo como LESS (inuepenuente ue sua extensão)
• .'+#)/+$: 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 não utiliza o conteúuo na
saiua
Exemplo:
import (reference) 'biblioteca.less';
9.1.1 Import e var|áve|s
Se a impoitação iesultai em uma vaiiável uefiniua mais ue uma vez, a _")*-(
uefinição, consiueianuo o escopo uo atual paia o mais exteino, é usaua. Poi
exemplo, na pagina more-3-imports-base.less foiam uefiniuas as seguintes
vaiiáveis:
@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 não foiam
ieuefiniuas. Elas são calculauas com base no valoi ()J(" ue @base, que agoia
é #0000ff. 0 iesultauo em CSS é:
.sec {
background-color: #000099;
color: #6666ff;
}
9.1.2 8|b||otecas úte|s
Existem váiias 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 atiavés ua impoitação 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 tiês outias opções mais
completas: 2$%%3!#, 4+$!(+$%% e 5($6**#, além uo piopiio 78)##$( 9**#%#(!/
que inclui mixins ieutilizáveis em váiios aiquivos .less que pouem sei
impoitauos.
Paia usai uma biblioteca ue foima estática, 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
necessáiio. A maioi paite uas bibliotecas também 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 seção aboiua algumas funções que ajuuam a uesenvolvei Web sites
accessiveis, mais eficientes e inuepenuentes ue biowsei.
9.2.1 Contraste
A função contrast iecebe uma coi e uevolve outia que contiasta com a outia
(uefault é 4S‚ ue uifeiença). Apenas a coi piecisa sei passaua como paiâmetio,
mas também poue-se configuiai o nivel ue contiaste infoimanuo um pai ue
coies como iefeiências ue claio¡escuio e a peicentagem ue contiaste uesejaua.
Função Recebe Retorna
contrast(c)
contrast(c,c1,c2)
contrast(c,c1,c2,p)
c = a coi que seiviiá ue
paiâmetio paia calculai o
contiaste.
c1, c2 = coies ue iefeiência
claio¡escuio (opcionais) -
4%I(J") é pieto¡bianco.
p = peicentagem ue contiaste
(opcional) - 4%I(J") é 4S‚
coi contiastante em
ielação à coi ue
iefeiência.
{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 Conversão de cor para formato M|crosoft
A função argb conveite uma coi em uma iepiesentação ue coi piopiietáiia
compativel com aplicações >*!'#.#I) e V$)%'$%) D?B"#'%'. Poue sei usaua em um
mixin que geia ueclaiações CSS inuepenuentes ue biowsei. Nesta iepiesentação
o fatoi alfa é um númeio hexauecimal entie uu e FF e é iepiesentauo antes uos
paies hexauecimais uos componentes RuB. 0 foimato iesultante é#aarrggbb.
{less} {9:+less }

1uu
Função Recebe Retorna
argb(a,r,g,b)
a = númeio entie u e 1
ou peicentagem,
r,g,b = númeios (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 função 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 solução paia
imagens que são utilizauas muitas vezes (fontes, icones) quanuo fazei uownloau
ua imagem em nova iequisição é 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 são úteis paia agiupai outios mixins e evitai conflitos ue nome,
piincipalmente em aplicações que impoitam folhas ue estilo ue teiceiios.
Abaixo estão uois mixins ue mesmo nome, poiém em namespaces uifeientes:
#circular {
.mask() {
-webkit-mask-image: url(circle.svg);
}
}

#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 também usai a notação#externo > .interno).
.photo1 {
border: none;
#circular.mask();
}

.photo2 {
border: none;
#rectangular.mask();
}
Resultauo em CSS:
.photo1 {
border: none;
-webkit-mask-image: url(circle.svg);
}
.photo2 {
border: none;
-webkit-mask-image: url(rectangle.svg);
}
9.4 Uso de |ess no browser
0 piocessauoi Less poue sei executauo no biowsei atiavés 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 página que piecisem sei piocessauas
pelo sciipt, uevem sei caiiegauas na página ($)%. 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 depuração no browser
Paia tiabalhai com Less em tempo ue uesenvolvimento, e tei os iesultauos
iepiocessauos biowsei sempie que uma alteiação 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 extensão paia o FiieBug, o FiieLess peimite obtei infoimações uetalhauas
ue eiios, númeios ue linha onue os eiios ocoiieiam, etc. quanuo se tiabalha com
Less.
{less} {9:+less }

1u2
9.S Lxecução de IavaScr|pt v|a Less
Existe um iecuiso $E# 4#!J-%$)(4# que peimite executai tiechos ue }avaSciipt
uentio ue Less. Não é possivel executai tiechos gianues. Funções exteinas são
possiveis, mas apenas com Less no biowsei ou em uma aplicações Noue.js. E um
iecuiso que não 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 vaiiáveis pouem sei passauas ue foima inteipolaua, como em stiings. 0
métouo toUpperCase() em }avaSciipt põe 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 limitações uo
Less, paganuo o pieço uo aumento ua complexiuaue.
Este outio exemplo é um mixin que geia piopiieuaues e valoies (a linha é uma
so e não 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 matemáticas, mas não é
possivel lei vaiiáveis uo mouelo ue objetos:
@variavel: `document.images.length`; // NÃO FUNCIONA SEM BROWSER!
Quanuo se executa o pié-piocessauoi Less no seiviuoi ou em linha ue comanuo
$E# %?*.)% B<6*$(, logo não existe B0N nem document. Less stanualone piecisa
geiai um CSS estático.
Nas não há gaiantia que isto iiá funcionai no biowsei. 0s objetos ua áivoie B0N
pouem não tei siuo ciiauos quanuo a página Less geiai o CSS. E possivel
contoinai algumas limitações, 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 opções 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 infoimações uinâmicas uo biowsei paia ieconfiguiai a
folha ue estilos, poue-se fazei o oposto: uiminuii ao máximo o tempo entie os
iepiocessamentos. Assim, se o usuáiio 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 posições
muuem uinamicamente.
E impoitante obseivai que essas técnicas não são (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 vaiiáveis usanuo os iecuisos ue sciipting uo Less,
acessiveis tanto no seiviuoi via Noue.js, quanto no biowsei. Poucos uesses
iecuisos são uocumentauos, poitanto, uevem sei usauos com ieseiva.
9.6.1 Subst|tu|ção de var|áve|s no browser
vaiiáveis globais pouem sei mouificauas via }avaSciipt. A alteiação não alteia
nem iecaiiega a folha ue estilo mas foiça o iepiocessamento. As vaiiáveis
alteiauas iião valei paia touo o escopo ua folha ue estilos na página.
Paia mouificai use um sciipt caiiegauo (Bm. o less.js uefininuo um
objeto less.modifyVars contenuo a lista uas vaiiáveis a seiem ieuefiniuas:
<script>
less.modifyVars({
'@cor-default': 'rgba(128,128,128,0.9)',
'@tam-fonte-default': '12pt',
'@margens': '2px'
});
</script>
vaiiáveis globais novas (que não existem na folha ue estilos) pouem sei
inseiiuas ue foima similai usanuo less.globalVars.
9.6.2 Iunções custom|zadas
Poue-se também ciiai funções em }avaSciipt que seião usauas uentio ue folhas
ue estilo Less caiiegauas no biowsei. Essas funções uevem sei uefiniuas
em less.functions e uepenuem uo uso ue tipos ue uauos não-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 função poue sei chamaua uentio ua folha ue estilos Less
como se fosse uma função 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 conteúuo. A folha ue estilos poue sei uma stiing geiaua na hoia poi
}avaSciipt, ou mesmo um uocumento exteino que não 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 vaiiáveis 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>
váiios uesses iecuisos uo Less ainua são pouco uocumentauos e pouem muuai,
poitanto evite usá-los em piouução. 0 piocessamento Less no biowsei também
é pouco peifoimático, 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||cações Node.[s
Em aplicações }avaSciipt lauo-seiviuoi como aplicações 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 atiavés 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 Cpções de ||nha de comando
Buas opções toinam o compilauoi Less mais iigoioso uuiante a compilação. As
opções são passauas em linha ue comanuo sepaiauas poi espaços ua foima:
lessc opções arquivo.less
A opção -su=on (stiict units) piovoca eiios ue compilação em cálculos com
uniuaues incompativeis, multiplicação e uivisão com uniuaues. Esses eiios são
ignoiauos poi uefault.
{less} {9:+less }

1u7
A opção -sm=on (stiict math) apenas executa expiessões matemáticas que
estiveiem 4%$)'# 4% B('S$)%.%.. Isto poue toinai-se uefault na veisão 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:iefeiências }

1u8
{10: !"#"!$%&'() +
10.1 Lspec|f|cações e documentação of|c|a|
1. Bocumentação oficial. A uocumentação oficial é bastante abiangente e
ofeiece váiios exemplos simples sobie o uso uos iecuisos uo Less. A
maioi paite uo mateiial uesta apostila baseia-se na uocumentação oficial.
0))Bfgg"%..!..7#'6
2. Especificações uo CSS. Less é CSS, poitanto é impoitante conhecei bem o
CSS e suas iegias já que elas também se aplicam a Less, e paia uescobiii
eiios causauos poi CSS geiauo incoiietamente.
0))Bfgg```7`A7#'6g/)i"%g&//g.B%!.
A7 Bocumentação uo Less4}. 0 compilauoi Less em }ava é um piojeto
paialelo com menos iecuisos que o Less oficial, mas a sua uocumentação
contém topicos e exemplos que não fazem paite ua uocumentação
oiiginal.
0))B.fgg6*)0J87!#-g/#->%'*g"%..Cdg`*3*gnB(6%.
C7 Biscussão uo piojeto Less no uitBub. Paia topicos não uocumentauos,
bugs, iequeiimentos, veisões, esta é a fonte oficial (emboia iespostas
no Stack0veiflow talvez sejam mais iápiuas).
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 iefeiências ua Web.
0))B.fgg4%+%"#B%'7-#^*""(7#'6g%$1b/g4#!.gh%8g&//
{less} {1u:iefeiências }

1u9
:7 Less CSS - Tips anu Tiics (2u1S) poi Náiia }ui…ovi…ová. 0ma lista ue
tiuques e uicas com Less que não apaiecem na uocumentação 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 Náiia }ui…ovi…ová.
Aimauilhas uo Less e outios topicos que não são uiscutiuos na
uocumentação 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 ausência ue uocumentação e
exemplos sobie Less, o banco ue peiguntas e iespostas Stack0veiflow
(assim como o foium uo piojeto Less no uithub) são 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 iefeiência paia entenuei Less atiavés 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 não-of|c|a|s
97 B0N†T 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 intiouução 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 váiios
exemplos.
0))Bfgg```74%+%"#B%'4'*+%7!#-g:F9:gFCg"%('$*$61"%..1($1*$)'#4J!)*#$
10.4 8|b||otecas
97 less.elements: coleção 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
{less} {1u:iefeiências }

11u
C7 Pieboot: biblioteca ue mixins usaua pelo Twittei Bootstiap.
0))Bfgg6%)B'%8##)7!#-g
10.S Ierramentas
97 less.app: compilauoi Less giáfico 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 giáfico 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
{less} {1u:iefeiências }

111
Exercícios
Parte 1 (introdução, aninhamento, variáveis,
extend e mixins)
1. |V$)'#4JKE#‡ Teste a configuiação uo seu ambiente:
a. Tiansfoime o uocumento teste.css em um uocumento .less,
uefina uma vaiiável @cor paia as coies que se iepetem e aninhe
os tiês 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 vaiiável @cor) e
veja se o BTNL é alteiauo.

2. |2$*$0(-%$)#‡ 0 aiquivo basics.css contém 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 máximo (paia contexto e
pseuuo-elementos).

S. |;('*<+%*.‡ Remova a uuplicação ue uauos ua folha ue estilos
variables.css. Ciie uma folha ue estlos Less equivalente que utilize
vaiiáveis 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), faça com que a página 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.
{less} {1u:iefeiências }

112

0se aninhamento e faça auaptações se necessáiio. veiifique se a
ueclaiação usaua no extenu é uma coiiesponuência %?()(.

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 página mixin-extend.html exibe um div bianco,
cujas uimensões e boiua estão uefiniuas em mixin-extend.less.
Analise o couigo geiauo no CSS e alteie o uocumento mixin-
extend.less ue tal maneiia que o giauiente apaieça uesenhauo no
div.

6. |>*?*$.‡ 0 uocumento mixin-6.html contém quatio tabelas iuênticas
que uifeiem apenas no id. 0 uocumento mixin-6.less aplica funções
que vaiiam a laiguia e o biilho ue uma coi paia caua tabela. 0bseive que
há bastante uuplicação 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 não 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.