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.
Différence entre SASS et SCSSDifférence entre SASS et SCSSSass fournit deux syntaxes distinctes: SASS SCSS Les deux sont similaires et font la même chose, mais écrit dans un style différent. Le SCSS est…Lire plus  

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;
}
Différence entre SASS et CSSDifférence entre SASS et CSSÉcrire un style pour un site web est un art. Avec toutes les façons dont vous pouvez manipuler les éléments HTML, il est important de…Lire plus
Exemple de Less
@blue: #0000FF;
@light-blue: @blue + #110;

div {
    color: @light-blue;
}

Après la compilation, la sortie en CSS :

div {
  color: #1111ff;
}

 

Conclusion

SASS et LESS, les deux permettent l’utilisation de variables. La différence clé entre SASS et LESS, est que SASS est basé sur Ruby, alors que LESS utilise JavaScript. Même cela ne donne à aucun des pré-processeurs un avantage sur l’autre. SASS est beaucoup plus populaire. Mais cela pourrait être dû au fait que SASS est un peu plus âgé. À l’origine, LESS était pris en charge par le framework front-end réputé Bootstrap, qui reposait sur le préprocesseur le plus récent. Mais avec la version 4, le projet a officiellement basculé vers SASS, ce qui a encore renforcé la popularité de SASS.
À quoi ça sert un Service WebÀ quoi sert un Service WebLes applications professionnelles modernes utilisent diverses plates-formes de programmation pour développer des applications Web. Certaines applications peuvent être développées en Java, d’autres en .Net, d’autres…Lire plus

Partagez cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *