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

Print Friendly and PDF