Licence CC BY-SA

Reprenez le contrôle de vos feuilles de style avec Sass

Apprenez à mieux organiser vos feuilles de style avec Sass

Dernière mise à jour :
Auteurs :
Catégorie :
Temps de lecture estimé : 5 heures et 15 minutes

Lorsqu’on découvre comment sont faits les sites Web, on est souvent étonné de voir que le contenu (HTML) est clairement séparé de la mise en page (CSS). Et puis, assez vite, on ne peut plus s’en passer. C’est tellement pratique ! Mais au bout d’un moment, nos fichiers CSS deviennent très longs, très très longs, et on ne s’y retrouve plus. Alors, comment mieux organiser son code, comment le rendre plus maintenable ?

En utilisant Sass, pardi !
Faites place à Super-Sass !

Prérequis
Connaître le fonctionnement des feuilles de style, avoir des bases solides en CSS.

Objectifs
Découvrir les différents outils que Sass met à notre disposition pour faciliter l’organisation et la réutilisation des feuilles de style.

Autres remarques
Ce tutoriel se basera sur un exemple « fil rouge » dont le code est disponible sur GitHub. Nous en reparlerons au cours du premier chapitre, ne vous inquiétez pas. ;)

Les bases de Sass

  1. Sass, un préprocesseur CSS

    1. Un préprocesseur CSS

    2. À quoi ça sert ?

    3. Installation

    4. Notre projet fil rouge

    5. La compilation

  2. L'imbrication

    1. L'imbrication, pourquoi faire ?

    2. La référence au parent

    3. Imbrication de media-queries

    4. Bonne pratique : « The Inception Rule »

  3. Les variables

    1. Les variables, pourquoi faire ?

    2. Les différents types de données

    3. L'interpolation

    4. La règle !default

  4. La directive @import

    1. Importer des feuilles de style

    2. Bonne pratique : Les feuilles partielles

  5. Les mixins (1/2)

    1. Un mixin, pourquoi faire ?

    2. Inclure un mixin

    3. Les arguments

  6. Les mixins (2/2)

    1. Valeurs par défaut, arguments nommés et listes d'arguments

    2. Passer un bloc de contenu à un mixin

    3. Bonne pratique : Arguments & type null

  7. Les fonctions

    1. Un fonction ?

    2. Quelques fonctions bien utiles

    3. La palette du peintre

    4. Jouons avec les listes

    5. Créer sa propre fonction

Plus loin avec Sass

  1. L'héritage avec @extend

    1. Il est où le grisbi ?

    2. Les placeholders (un nouvel eldorado ?)

    3. Bonne pratique : Faut-il oublier @extend ?

  2. Les conditions

    1. Les bases

    2. @else, @else if…

    3. Mini-TP : un mixin bien compliqué

  3. Les boucles

    1. La boucle @for

    2. La boucle @each

    3. Mini-TP : La gestion d'une sprite

  4. Et maintenant ?

    1. Le type map

    2. Utiliser des bibliothèques externes

    3. RubySass, LibSass, DartSass, et les autres…



Et voilà, vous êtes arrivés à la fin de ce tuto ! Merci de l’avoir lu jusqu’au bout ! Je n’exclus pas quelques changements par la suite, si j’ai le temps d’améliorer certains exemples, ou si certaines infos deviennent obsolètes (et cela risque d’arriver assez vite). S’il vous reste des interrogations, n’hésitez pas à les poster sur le forum Web.

Pour finir, je remercie évidemment toutes les personnes qui ont suivi ce tuto en bêta et m’ont apporté leurs conseils (et tout particulièrement Vayel) ainsi qu’Abdelazer et artragis pour leur relecture minutieuse.

1 commentaire

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte