Le CSS est très utilisé depuis des années et ça marche plutôt bien. Mais comme tout le monde le sait, nous voyons très vite ses limites et nous sommes contraint d’employer d’autres méthodes pas toujours très propres (JavaScript entre autre … Très utile, mais pas toujours optimal en terme de performances).
Depuis maintenant quelques années le SASS a su s’imposer, et ce n’est pas pour déplaire ! Alors voilà pourquoi vous devriez arrêter le CSS et plutôt passer au SASS :

      1. Les variables
        C’est un manque énorme que l’on ressent avec le CSS. Maintenant, avec sass, vous pouvez stocker des données et les réutiliser facilement.
        Un exemple ? Stockez le code de vos couleurs. Si vous voulez changer une couleur dominante sur votre site, il ne vous suffira plus qu’à modifier la valeur de la couleur correspondante dans votre variable. Comme par magie, les couleurs de votre site auront changé !variables
      2. Les mixins
        Les mixins sont des fragments de CSS qui peuvent s’utiliser comme des fonctions. Concrètement, si vous voulez créer des animations, il faut en CSS plusieurs propriétés (webkit) pour la compatibilité sur les différents navigateurs. Au lieu de citer chaque propriété à chaque fois pour appliquer une animation à un élément, on utilise les mixins. On entre simplement les paramètres au mixin (le temps par exemple).mixins
        Ici un exemple pour les border-radius (bords arrondis). Après le code ci dessus, il suffit simplement d’appeler la fonction et de lui entrer en paramètre, la valeur correspondant au degré d’arrondi. Ensuite, c’est à vous d’être créatif, et à penser à d’autres cas d’utilisation !
      3. Une arborescence maîtrisée et efficace
        Vous aviez peut être l’habitude en CSS de séparer vos feuilles de style en différents fichiers en fonction des pages ou des grands ensembles de votre site.
        Cette pratique n’est pas optimale dans la mesure où ces importations de fragments de CSS génèrent de nouvelles requêtes par le navigateur en fonction des éléments à afficher, ce qui demande plus de temps de chargement. Ceci implique une répercussion du référencement de votre site sur les moteurs de recherche !
        Avec sass, vous pouvez créer autant de feuilles de style que vous le voudrez. Vous pourrez ensuite créer une feuille dédiée à l’importation de toutes les autres créées précédemment. Toutes ces pages seront ensuite compilée par la suite pour générer un seul et unique fichier CSS.
      4. Une facilité d’écriture, de lecture, et un code optimisé
        L’écriture avec sass est mieux organisée, plus lisible, moins répétitive. Ce qui booste les performances de votre site et rend le travail sur le fichier plus agréable. Autre point non négligeable : plus besoin de point-virgule après chaque propriété, plus besoin non plus d’accolades. Quel bonheur !
        En CSS, les propriétés CSS sont listées les unes en dessous des autres. En sass, elles sont imbriquées et l’écriture est nettement simplifiée. Voici un exemple :exemple-sass
      5. Parce que vous ne serez pas le seul à utiliser le sass
        Soyez rassurés, sass est utilisé depuis maintenant 7 ans par de grandes entreprises comme GitHub, Google, ou encore Twitter. S’ils le font, c’est que ça marche !


Comment mettre en place le sass sur votre site ?

Il vous suffit simplement d’installer sur votre poste de travail un compilateur sass ( Prepros par exemple). Vous lui indiquerez où sont les fichiers d’entrée ( fichiers sass) et le fichier de sortie (fichier CSS généré). Ainsi à chaque modification d’un fichier sass, le compilateur fait son travail et le CSS est mis à jour automatiquement !

Alors ? Vous êtes maintenant convaincus que le sass c’est mieux ? Maintenant, sur le même principe, vous pouvez abandonner le HTML et passer au PUG !