Licence CC BY-SA

Les bases de Sass

Dans cette première partie, nous allons installer Sass et découvrir les outils principaux qu’il met à disposition des développeurs pour organiser et gérer les styles. Il sera question d’imbrication, de mixins, de variables, de fonctions, etc.


  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



C’est la fin de cette première partie consacrée aux bases de Sass. Mais il reste encore quelques concepts plus avancés à découvrir !