Sommaire

La gestion des styles avec LESS et SASS LESS SASS

Les utilisateurs web demandent beaucoup des sites, tant sur le plan du style que de l’expérience utilisateur. Ces contraintes demandent également au développeur d’utiliser des frameworks toujours plus complexes et complets afin de parvenir à un résultat final convaincant. L’organisation du projet est essentielle pour garantir une maintenabilité optimale, et pour le design cela revient à concevoir des feuilles de style CSS à la fois consistantes et lisibles : un nouveau développeur de l’équipe doit pouvoir également s’y retrouver facilement. C’est ainsi que sont nés les outils LESS et SASS, accompagnés de librairies comme Font Awesome. CSS

Les langages LESS et SASS sont des langages de préprocesseur CSS, c’est-à-dire que ce sont des langages qui sont destinés à être compilés en CSS. Ces langages apportent des fonctionnalités supplémentaires au langage CSS de base comme la gestion des variables, l’imbrication des styles pour éviter les répétitions et bien plus encore. L’exemple ci-dessous donne un premier exemple en CSS, puis un deuxième montre, en LESS, comment les styles peuvent être mutualisés :

.header { 
  color: black; 
  font-weight: bold; 
  font-size: 18px; 
  font-family: Helvetica, Arial, sans-serif; 
} 
 
.small-header ...