Différence entre SASS et LESS

Il existe un certain nombre de préprocesseur CSS à savoir LESS, Sass, Stylus et Swith CSS. Comme nous l’avons souvent dit, le préprocesseur CSS est principalement destiné à rendre la création de CSS plus dynamique, organisée et productive. Mais la question est de savoir lequel d’entre eux fait le travail le mieux.
 
 
SASS(Syntactically Awesome Stylesheets) et LESS (Leaner CSS) sont compilés dans des feuilles de style CSS afin que les navigateurs puissent les lire, ce qui est une étape nécessaire car les navigateurs modernes ne peuvent pas lire les types de fichiers .sass ou .less.
 
Less et Sass, les deux essaient de résoudre le même problème: le CSS limite l’expressivité et peut conduire parfois à des feuilles de style répétitives. Less a tendance à être plus simple à apprendre (c’est un sur-ensemble strict de CSS, de sorte que tout fichier CSS valide est un fichier Less valide), mais Sass tend à être plus puissant et extensible.
 
Lorsque vous écrivez des styles Less ou Sass, vous devez configurer une sorte d’étape de compilation pour les traduire en CSS que les navigateurs peuvent comprendre. Grunt, Gulp, Rails gems, etc. sont des options populaires permettant d’automatiser le processus de développement.
 
Sass est basé sur Ruby et nécessite une installation de Ruby. Ce n’est pas un souci si vous avez un Mac. Cependant, il s’agit d’une installation plus longue si vous avez une machine Windows.
 
LESS a été construit sur Ruby comme Sass, mais il a été tourné en JavaScript. Afin d’utiliser LESS, vous téléchargez les fichiers JavaScript applicables sur votre serveur ou compilez les feuilles CSS via un compilateur hors ligne.

SASS

Pour exécuter Sass, vous devez avoir installé Ruby. Sur les nouvelles versions de Linux et OSX, Ruby est déjà préinstallé. Vous pouvez installer Sass avec la commande suivante. sudo gem installe sass
 
Il existe également d’autres bibliothèques, telles que libSass, qui amène maintenant Sass à NodeJS, sans avoir besoin de Ruby.
 
Sous Windows, vous devez d’abord installer Ruby. Si vous êtes sur un Mac, Ruby est déjà préinstallé.
 
Ouvrez votre terminal ou une invite de commande puis tapez : Install Sass sudo gem install sass
 

LESS

LESS est écrit en JavaScript, vous aurez donc besoin de NodeJS pour l’exécuter.
 
Sous Linux et Mac, vous pouvez l’installer à l’aide de la commande suivante. npm install -g less
Vous pouvez ensuite utiliser cette commande pour compiler au format CSS. lessc styles.less styles.css
Sous Windows, vous devez installer le programme d’installation de NodeJS.
1- Ouvrez votre invite de commande
2- Exécutez npm install less
3- Vous pouvez ensuite utiliser cette commande pour compiler au format CSS. lessc styles.less styles.css
 
 

Exemple de Sass

$font: Helvetica, sans-serif;
$color: #777;

body {
  font: 100% $font;
  color: $color;
}

Après la compilation, la sortie en CSS :

body {
   font: 100% Helvetica, sans-serif;
   color: #777;
}