1
Anàlisi de LESS en la Web del 2021
Pau Comas Herrera
Escola d’Enginyeria, Universitat Autònoma de Barcelona, Bellaterra 08193, Espanya
Leaner Style Sheets (LESS) és un preprocessador de CSS que va ser creat al 2009 per solucionar les limitacions del llenguatge
web d’estil CSS i així treballar en un entorn més eficient, mantenible i dinàmic. En aquest article examinem com ha evolucionat
amb el pas dels anys i quin grau d’utilitat manté avui en dia, competint amb la progressió del propi CSS i altres preprocessadors.
Revisem les seves principals característiques, avantatges, desavantatges i la seva situació en el context de programació web actual.
Index Terms—LESS, preprocessament CSS, variables, mixins, nidificació, compilació, SASS, Stylus
I. I NTRODUCCIÓ
L recent creixement de les tecnologies web ha portat el
llenguatge Cascading Style Sheets (CSS) als seus màxims
de popularitat. Segons [1], avui en dia el 96.3% de les pàgines
web l’utilitzen per a definir la seva estructura i estil d’una
manera pròpia i atractiva pels usuaris. Part important de l’èxit
que pugui tenir una pàgina (o inclús una franquícia de vàries
webs) està en la qualitat i distinció que aporti el seu CSS
respecte a la competència.
No obstant, ja des de la seva creació van aparèixer dubtes
per les seves possibles limitacions. Culshaw, Leventhal i
Maloney [2] van informar sobre vàries, entre elles l’absència
de variables. Majoritàriament no es va respondre ràpidament a
la demanda de la comunitat programadora. Per exemple, l’any
2015 tant sols el 9% dels navegadors suportaven les variables
en CSS3 [3].
Degut a les necessitats d’un CSS més complet, al 2009 va
aparèixer Leaner Style Sheets (LESS), un preprocessador CSS
que permetia escriure el nostre fitxer d’estil en un llenguatge
extès amb més funcionalitats. Aquest arxiu podia ser compilat
a CSS un cop acabat. Avui en dia es segueix utilitzant,
actualitzat des del 2014 però mantenint gran part de les
característiques originals.
L’objectiu d’aquest article és analitzar si LESS actualment
és recomanable. A la secció 2 analitzarem les seves característiques principals i com han envellit amb el pas del temps. La
secció 3 será sobre desavantatges que presenta el seu ús. A
la secció 4, veurem la seva competència i popularitat actual.
Finalment, descriurem les conclusions extretes.
E
II. F UNCIONALITATS DE LESS
En aquesta secció exposarem les característiques principals
que diferencien LESS davant CSS3. Per cada una veurem el
seu funcionament i si suposen un avantatge.
A. Variables
L’ús de variables és simple però suposa una millora substancial en el manteniment del codi. A continuació podem veure
un exemple de com substituint atributs iguals per una variable
LESS podrem controlar-los des del mateix lloc i fàcilment en
cas de voler efectuar algun canvi.
LESS
@color: #4D926F;
h1 {
color: @color;
}
#header {
color: @color;
}
compilació CSS
h1 {
color: #4D926F;
}
#header {
color: #4D926F;
}
En l’actualitat hi ha variables a CSS, creant-les dins del
selector :root i cridant-les com a var(--my-var). Segons
Dave Gash de Google [3] la data aproximada de la seva
acceptació generalitzada en els navegadors va ser l’any 2016
i per tant l’ús de LESS ja no suposa una millora en aquest
aspecte.
B. Mixins
Els mixins són regles CSS que es poden incloure en
altres regles CSS, evitant així la redundància del CSS natiu.
Treballant amb projectes grans la llegibilitat del fitxer LESS
serà molt millor:
compilació CSS
LESS
.mixin1 {
.mixin1 {
color: blue;
color: blue;
border-radius: 5px;
border-radius: 5px;
}
}
.regla2 {
.regla2 {
color: blue;
.mixin1()
border-radius: 5px;
background: white;
background: white;
}
}
També és possible crear mixins amb variables per paràmetre
o cridar diferents mixins dins de noves regles. En CSS no hi
ha res similar, ja que al 2017 es va intentar emular aquesta
funcionalitat amb una regla anomenada @apply [4] però va
acabar abandonant-se.
C. Nidificació
La nidificació ens permet organitzar la jerarquia de regles
dins de selectors d’una manera intuïtiva i mantenible. El
següent exemple és d’un cas bàsic, però a mesura que anem
2
afegint selectors dins de selectors la diferència és notòria:
LESS
compilació CSS
#header {
#header {
padding: 60px;
padding: 60 px;
ul {
}
background: white; #header ul {
}
background: white;
}
}
En ple 2021, encara no és possible la nidificació eficient de
regles en el CSS natiu, si bé ara es troba en desenvolupament
[5]. Es considera un dels principals avantatges de LESS degut
a la millora en la mantenibilitat del codi.
D. Operacions i condicions
LESS ens permet fer operacions matemàtiques, condicions
if/else i bucles [6], entre altres coses. Aquestes funcionalitats
no es troben a CSS i aporten un grau de diversitat més però no
les podem considerar importants. Al cap i a la fi, el fitxer CSS
serà compilat un sol cop i desapareixeran, pel que si volem
un control dinàmic del CSS en temps d’execució web haurem
de seguir fent-ho en JavaScript.
III. D ESAVANTATGES
L’inconvenient més rellevant de LESS es troba en la seva
naturalesa. Al no ser reconegut pels navegadors web, el procés
de compilació a CSS provoca un retard. Això sí, hi ha molts
compiladors diferents disponibles per a LESS (Ruby, PHP,
.NET, OS X, JS) i per tant la disponibilitat no en resulta un
problema.
D’altra banda, un punt negatiu en el que coincideixen alguns
dissenyadors web [7], [8], és la generació de CSS enormes
degut a la nidificació massiva. Aquest fet augmenta l’espai i el
temps necessari per la compilació CSS. No obstant, hi ha cert
debat en si realment es pot considerar un desavantatge important. Per a l’enginyer Vitaly Belman [9] cap dels desavantatges
proposats entorn la nidificació LESS són preocupants, incloent
entre ells el tamany dels CSS generats.
L’últim inconvenient comú en la comunitat és que LESS
afegeix una capa de complexitat afegida i per tant més risc.
Tantmateix, LESS floreix a partir de CSS seguint la demanda
de la comunitat programadora i la majoria de les seves
innovacions busquen la ressemblança amb els llenguatges de
programació clàssics. S’ha d’aprendre i configurar, peró ès un
període curt que a la llarga estalvia temps respecte a treballar
en CSS directament.
IV. C OMPETÈNCIA I POPULARITAT
En l’actualitat hi ha molts preprocessadors CSS, un d’ells
anomenat Syntactically Awesome Stylesheets (SASS). Bootstrap, el marc de treball més utilitzat en front-end, l’utilitza
per davant de LESS. Els dos ofereixen un ventall de característiques similars, però mantenen certes diferències. Per
exemple, segons [10] LESS està millor documentat i és més
fàcil d’aprendre mentre que SASS el supera en l’aplicació
d’estructures de control if/else o bucles.
En el passat SASS no podia compilar fitxers natius de CSS
degut a que els selectors es definien amb indentació en lloc de
claus. El creixement de LESS, que sí utilitza claus, va portar
als desenvolupadors de SASS a rectificar i crear Sassy CSS
(SCSS), la versió de SASS pels que prefereixen aquesta sintaxi
i competint encara més directament amb LESS.
Informes dels últims anys demostren la traslació de LESS
cap a SASS de la comunitat programadora. Les diferències
entre una enquesta de 2012 feta per Chris Coyler [11] i un
informe analitzant les tendències de Google i GitHub de 2019
[12] ens demostren que el canvi ha sigut real i, encara que
LESS manté una bona valoració i gruix d’usuaris, ja no és el
preprocessador dominant. Això sí, tot i que ha perdut bona
part del mercat, alternatives més recents com Stylus queden
encara enrere [12].
V. C ONCLUSIONS
En aquest article hem pogut analitzar el valor actual del
llenguatge LESS i com ha canviat en comparació a fa uns
anys. Hem vist com CSS està treballant per equiparar-se
a les característiques principals de LESS i, encara que ja
ens permet crear variables, de moment segueix sense oferir
altres característiques claus com la nidificació o la reutilització
de regles. També hem vist que utilitzar LESS té els seus
desavantatges, si bé no són suficients per descartar el seu
ús. Finalment, s’ha examinat com l’amenaça principal que té
LESS és SASS, que l’ha superat en termes de popularitat i
que ofereix el mateix o més com a preprocessador. No obstant,
LESS es manté com una opció sòlida i lleument més senzilla
per a començar a aprofitar les virtuts dels preprocessadors de
CSS.
R EFERÈNCIES
[1] W3techs. (2021, June 8). Usage statistics of CSS for websites [Online].
Available: https://w3techs.com/technologies/details/ce-css
[2] S. Culshaw, M. Leventhal and M. Maloney. (1997, Nov 28). Limitations
of CSS for Complex Applications. Webreview [Online]. Available:
https://w3techs.com/technologies/details/ce-css
[3] D. Gash. (2017, Apr 19). CSS Variables — No, really! Medium
[Online]. Available: https://medium.com/dev-channel/css-variables-noreally-76f8c91bd34e
[4] T. Atkins-Bittner. (2017, May 8). Why I Abandoned @apply. Xanthir
[Online]. Available: https://www.xanthir.com/b4o00
[5] W3C Editor’s Draft. (2021, May 17). CSS Nesting Module [Online].
Available: https://drafts.csswg.org/css-nesting-1/
[6] Tutorialspoint. (2021). LESS - Loops [Online]. Available:
https://www.tutorialspoint.com/less/less_loops.htm
[7] S. Mhatre. (2020, Aug 17). Interview Series 1: Advantages and
disadvantages of using CSS preprocessors. Coder Who Dreams
[Online]. Available: https://medium.com/dev-channel/css-variables-noreally-76f8c91bd34e
[8] A. Silver. (2015, May 5). The disadvantages of CSS preprocessors. Adam
Silver [Online]. Available: https://adamsilver.io/blog/the-disadvantagesof-css-preprocessors/
[9] V. Belman. (2015, Apr 26). The benefits of nesting in LESS/SASS.
Medium [Online]. Available: https://medium.com/@vitalyb/nestingbenefits-in-less-sass-371fd447fc59
[10] J.D. Pérez. (2019, Nov 20). Sass vs Less. OpenWebinars [Online].
Available: https://openwebinars.net/blog/sass-vs-less/
[11] C. Coyier. (2012, June 11). Poll Results: Popularity of CSS Preprocessors. CSS-Tricks [Online]. Available: https://css-tricks.com/poll-resultspopularity-of-css-preprocessors/
[12] D. Kryukov. (2019, July 2). Sass vs. Less: Which CSS Preprocessor to
Choose. Soshace [Online]. Available: https://soshace.com/sass-vs-lesswhich-css-preprocessor-to-choose-in-2019/