Il était temps de dépoussiérer le CSS et de le rendre plus en efficace. Nixa s'est penché sur le SASS et ses atouts majeurs.
Les limites du css
Le CSS est un langage on ne peut plus simple. Simple à écrire, à lire, à modifier ou encore à réutiliser. Mais les limites du CSS naissent à mesure que la complexité d’un projet grandit. Plus le projet devient riche et dynamique, plus il est difficile de garder des feuilles de style propres, et par-dessus tout, facilement modifiables et flexibles. Tous les développeurs web ont déjà connu cela… des recherches fastidieuses, dans un code ultra répétitif, d’un morceau de CSS pour le copier-coller, y ajouter un sélecteur et enfin le modifier.
Ainsi, de la déconcertante simplicité du CSS découle sa principale faiblesse : son manque de dynamisme.
Une nouvelle syntaxe, plus flexible et dynamique, remplaçant le CSS, aurait pu être une piste pour résoudre cet épineux problème, mais deux raisons éloignent cette perspective :
- Les navigateurs ne sont pas prêts à adopter une nouvelle syntaxe pour des raisons évidentes de compatibilité. Et quand bien même ils sauteraient le pas, un support total par tous les navigateurs prendrait plusieurs années.
- Malgré le handicap qu’elle génère, la structure simple et accessible du CSS doit perdurer pour assurer la mise à jour rapide et facile des sites web ainsi que son accessibilité à des non-initiés.
En effet, le but n’est pas de complexifier une pratique et un processus simple de création de sites web (HTML/CSS), mais d’offrir aux développeurs web des outils de développement plus avancés. C’est pourquoi la solution n’a pas été de substituer le CSS, mais plutôt d’automatiser et de dynamiser sa rédaction : bienvenue dans le monde magique du SASS.
Feuilles de style syntaxiquement impressionnantes
Créé par Hampton Catlin et Nathan Weizenbaum, le SASS (.sass) permet de gérer des feuilles de styles de manière dynamique, à l’aide de variables, de conditions, de fonctions, de boucles et d’expressions.
Les premières versions de SASS tranchaient radicalement avec le CSS que l’on connait. En effet, pas d’accolade, avec une indentation stricte qui rendait son apprentissage par des développeurs / web designer assez peu attrayant. Seuls les programmeurs, qui y retrouvaient des systématismes familiers, voyaient d’un œil favorable cette rigueur.
Le plus gros problème de ces premières versions de SASS restait avant tout son incompatibilité syntaxique avec le CSS. Ce qui en clair voulait dire qu’il était impossible d’écrire du CSS dans des feuilles de styles SASS. Imaginez le temps passé à convertir un morceau de CSS en SASS afin de l’intégrer à un projet…
Ainsi, afin de s’ouvrir à un plus large public et de rendre le SASS compatible avec le CSS, le SASS 3.0 met en place le SCSS (.scss), comprenez Sassy SASS (le Sass Classe).
Contrairement au SASS originel, le SCSS est beaucoup plus proche du CSS. En effet, il est tout à fait possible de faire cohabiter dans une même feuille de style SCSS et CSS. Tout ce qui est valide en CSS l’est en SCSS. Ce point essentiel a permis de séduire beaucoup plus facilement et en douceur les développeurs web adeptes du CSS qui ne souhaitaient pas se lancer dans un langage beaucoup trop complexe.
Utiliser le SASS est donc devenu un atout, essentiel dans le développement dans site web, sans pour autant l’alourdir par l’apprentissage d’une syntaxe complexe. Au contraire, le SASS a tout simplement permis aux développeurs d’enfin faire ce dont ils ont toujours rêvé de faire en CSS sans pour autant les éloigner de ce langage de base.
Quʼest ce que le SASS peut faire de cool ?
Nous n’allons pas rentrer ici dans une approche trop technique. Disons simplement que le SASS est codé en Ruby et que vous trouverez sur les sites officiels toutes les infos nécessaires à son installation. SASS nécessite un compilateur qui transformera automatiquement, à chaque sauvegarde de votre fichier, votre SASS en CSS, grâce à un dossier input (contenant les SASS) et un dossier output (contenant le(s) CSS converti(s)). Il existe plusieurs solutions pour mettre en place ce compilateur, mais nous n’aborderons pas ici cet aspect.
Voyons plutôt les fonctionnalités du SASS qui changent la vie !
Les partiels (ou comment hiérarchiser et structurer ses feuilles de style simplement !)
L’utilisation de plusieurs feuilles de styles CSS pour tenter de structurer et de clarifier des fichiers souvent longs et indigestes, n’a jamais été une méthode répandue dans le sens ou chaque feuille de style appelé fait une requête sur le serveur et ralentie donc le chargement des pages. Cet aspect limitant trouve sa solution dans les SASS avec l’utilisation de fichiers partiels contenant des morceaux de SCSS et pouvant être appelés dans une feuille de style principale et ainsi réduire les requêtes à cette seule feuille de style.
Ces partiels commencent par un underscore ( _ ) pour indiquer au compilateur que ces fichiers ne sont que des partiels et qu’ils ne nécessitent pas de compilation en CSS. Le tout étant fait bien évidemment à la compilation du fichier dans lequel ils sont appelés. Ils sont ensuite appelés grâce à un @import à l'endroit souhaité dans n'importe quelle feuille de style principale.
Chaque aspect du projet peut ainsi avoir sa feuille de style indépendante (couleurs, pages, fonts, structure générale ou encore responsive).
Dans cette optique de structure claire et précise, il est courant de voir une feuille de style « main.css » entièrement constituée d’import de partiels, rendant ainsi la structure générale des fichiers SASS facilement modifiable et leur lecture beaucoup plus évidente.
Les variables (ou comment arrêter ne plus copier-coller 150 fois le même code couleur !)
Les variables sont un des points essentiels du SASS. En effet, elles permettent de définir des valeurs de propriété afin de les réutiliser sans difficulté et surtout de les modifier à un seul endroit dans le code.
SASS
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
CSS
body { font: 100% Helvetica, sans-serif; color: #333; }
Le changement de valeurs devient donc global et incroyablement plus efficace.
Lʼindentation (ou comment ne plus se répéter 1000 fois !)
L’indentation de SASS permet de ne plus répéter un chemin pour atteindre un sélecteur. Il suffit d’intégrer ce sélecteur directement dans les accolades du sélecteur parent.
SASS
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
CSS
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
Ainsi pour atteindre, modifier ou ajouter un sélecteur à un endroit précis, il n’est plus nécessaire de copier-coller le chemin, mais simplement de l’intégrer à l’endroit voulu. La lecture des feuilles de style est ainsi rendue plus claire et intuitive.
Les mixins (ou comment créer des déclarations réutilisables à lʼinfini !)
Les mixins permettent de créer des ensembles de règles applicables à différents sélecteurs. Cela peut s’avérer extrêmement utile, notamment pour l’écriture des préfixes indispensables pour certaines nouvelles fonctionnalités CSS3.
SASS
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
CSS
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
Avec un simple @include, un ensemble de règles peut donc être réutilisé très facilement. En début de projet, il est donc possible de créer ces ensembles de règles que l’on sait être récurrentes d’un projet à l’autre et ainsi les utiliser rapidement.
Voilà donc les grandes lignes du SASS qui permettent de gagner un temps précieux dans la création d’un site web. L’utilisation de SASS et d’un starter de projet comprenant les partiels, mixins, et variables les plus souvent utilisés, peut représenter un gain de temps considérable et faciliter le travail d’intégration.
Le gain de temps et la courbe d’apprentissage du SASS (à la croissance extrêmement rapide pour les développeurs déjà à l’aise avec le CSS) en font un outil maintenant indispensable.
En conclusion
Dans un souci d’efficience et de rapidité d’exécution, le SASS est essentiel pour Nixa. L’adoption de cet outil de développement nous permet d’optimiser notre temps de travail et ainsi de rendre nos processus plus efficaces !
Et comme on aime bien s’amuser chez Nixa, on ne pouvait pas passer à côté de ce nouveau jouet ! ;)