LESS et SCSS sont deux langages de génération dynamique de CSS.
Nous allons voir succintement les avantages et spécificités de ces langages.
La comparaison ne peut tenir compte de la version de LESS utilisée par les compilateurs utilisés avec Joomla 3.5
N'utilisant plus LESS depuis 2 ans, je n'ai pas suivi toutes ses évolutions et prise en charge par Joomla.
Commentaires
LESS et SCSS
mono-ligne : //
multi-lignes : /* */
Extensions et organisation des fichiers
LESS : extension: ".less".
SCSS : extension: ".scss". Les fichiers dant le nom commence par un underline (tiret du 8) sont nommés "partiels" et ne sont pas pris en compte lors d'une demande compilation de tous les fichiers d'un répertoire.
La commande pour importer un fichier par un autre est identique pour LESS et SCSS: @import fichier. l'extension .less ou .scss est optionnelle ainsi que le underline pour les partiels SCSS.
Variables
LESS : préfixé par @
@color:red;
.foo { color:@color }
SCSS : préfixé par $
$color:red;
.foo { color:$color }
L'énorme avantage de SCSS est de pouvoir attribuer une valeur par défaut à une variable.
Cela permet, par exemple, dans un partiel "_variables.scss" chargé en premier de définir uniquement les variables personnalisées. Les valeurs par défaut étant définies dans les partiels.
$rouge:darkRed;
$rouge:red !default;
.foo {color:$rouge;} /* darkRed */
Interpolation
LESS permet l' appel indirect de variable mais il est impossible de construire un nom de propriété.
@name:foo;
p.@{name} {color:#F00;}
$name:foo;
$property:color;
p.#{$name} {#{$property}:#F00;}
p.foo {
color: #F00;
}
Imbrications sélecteurs
SCSS et LESS dans ses dernières versions disposent des mêmes fonctionnalités
.foo {
background-color: red;
a { // sélecteur enfant
color: white;
&:hover { // pseudo-sélecteur
color:yellow;
}
}
#main & { // sélecteur parent
background-color: green;
}
}
L'opérateur & peut selon sa position définir un descendant ou un ascendant
.foo { background-color: red;}
.foo a { color: white; }
.foo a:hover { color: yellow; }
#main .foo { background-color: green; }
Imbrications mediaqueries
SCSS et LESS à partir de la version 1.4.0
.foo {
color: red;
@media (max-width:960px) {color: blue;}
@media (max-width:640px) {color: green;}
}
.foo { color: red; }
@media (max-width: 960px) {
.foo { color: blue; }
}
@media (max-width: 640px) {
.foo { color: green; }
}
Imbrications de propriétés
SCSS uniquement
.funky {
font: 20px/24px fantasy {
weight: bold;
}
}
.funky {
font: 20px/24px fantasy;
font-weight: bold;
}
Mixins
SCSS oblige le mot-clé @mixin pour définir un mixin et @include pour l'appeler. LESS est plus souple.
.cadre(@width : 1px) {
border: red @width solid;
}
.foo a { .cadre; }
@mixin cadre($width : 1px) {
border: red $width solid;
}
.foo a { @include cadre(2px); }
.foo a {
border: red 2px solid;
}
SCSS et LESS dans ses dernières versions permettent de nommer les paramètres
.cadre(
@width : 1px,
@color: blue) {
border: @color @width solid;
}
.foo a { .cadre(@color:red); }
@mixin cadre(
$width : 1px,
$color: blue) {
border: $color $width solid;
}
.foo a { @include cadre($color:red); }
.foo a {
border: red 1px solid;
}
Fonctions
LESS : non disponible, SCSS : @function
@function double($n) {
@return $n * 2;
}
.foo { width: double(5px); }
.foo {
width: 10px;
}
Partage de propriétés
SCSS permet d'attribuer les propriétés d'un sélecteur à un autre
LESS possible à partir de la version 1.4.0
.cadre-rouge {border: red 1px solid;}
.cadre-bleu {
&:extend(.cadre-rouge);
border-color : blue;
}
.cadre-rouge {
border: red 1px solid;
}
.cadre-bleu {
@extend .cadre-rouge;
border-color : blue;
}
.cadre-rouge, .cadre-bleu {
border: red 1px solid;
}
.cadre-bleu {
border-color: blue;
}
Opérations sur les chaines
LESS
.foo {
content:%("%d + %s = %A", 1, "un", "deux fois")
}
// => .foo { content: "1 + un = %22deux%20fois%22"; }
.foo {
content: "1 + un = %22deux%20fois%22";
}
SCSS
$x:5;
$s:unquote("#{$x}px");
.foo {
width:$x+px;
height:$s;
content:"larg=#{$x}px";
}
.foo {
width: 5px;
height: 5px;
content: "larg=5px";
}
Opérations mathématiques
LESS : il semblerait que les dernières versions convertissent avant calcul
SCSS : utilise l'unité du premier opérande pour la conversion.
.foo { width: 2in + 2.54cm;} /* résultat = 3in*/
.foo { width: 2.54cm + 2in;} /* résultat = 7.62cm*/
SCSS dispose d'une bibliothèque de fonctions plus étendue que LESS
Boucles
LESS : compliqué et très limité
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
SCSS : instruction @for, @while, @each, ...
@for $i from 1 to 5 {
.column-#{$i} { width: ($i * 100% / 4); }
}
$i: 4;
@while $i > 0 {
.column-#{$i} { width: ($i * 100% / 4); }
$i: $i - 1;
}
@each $i in (1, 2, 3, 4) {
.column-#{$i} { width: ($i * 100% / 4); }
}
Conditions
LESS : compliqué et très limité
.bg-contraste (@text-color) when (lightness(@text-color) >= 50%) {
background-color: black;
}
.bg-contraste (@text-color) when (lightness(@text-color) < 50%) {
background-color: white;
}
.foo {
color: #F00;
.bg-contraste(#F00);
}
SCSS : instruction @if, @else
@mixin bg-contraste($color) {
@if lightness($color) >= 50% {
background-color: black;
} @else {
background-color: white;
}
}
.foo {
color: #F00;
@include bg-contraste(#F00);
}
Références
LESS : lesscss.org/features
SCSS : Documentation SASS/SCSS
Emulateurs en ligne
LESS : winless.org/online-less-compiler
SCSS : sassmeister.com
Compilateur pour Joomla
LESS : LESS Compiler par Andreas Tasch
SCSS : SCSS Compiler par Lomart
Compilateur hors ligne
LESS et SASS : Koala pour Windows, Mac et Linux. Mon préféré qui permet également la compression des CSS et Javascript.
LESS : Crunch
SASS : Scout