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

Apprenez à mieux organiser vos feuilles de style avec Sass

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.

Ces contenus pourraient vous intéresser

13 commentaires

Bonjour,

Je viens de finir la lecture de ce tutoriel. Il est très enrichissant. Par contre, il y a un endroit où j’ai du mal à comprendre. Il s’agit du mini-TP : un mixin bien compliqué.

J’ai compris le code qui a été écrit dans la solution. Par contre, je n’arrive pas à imaginer son utilisation. Serait-il possible de rajouter une balise ou deux ayant une propriété différente en fonction de la largeur de l’écran ?

EDIT : c’est pinailler mais il manque un espace devant les caractères spéciaux tel que le point d’exclamation.

+1 -0

Merci pour avoir fait remonter les liens morts Helmasur, je viens de corriger tout ça dans le brouillon du tuto, pour la future mise à jour. :)

Sinon, concernant ton souci, oui, l’idée est d’avoir un unique mixin où sont définies les media-queries (breakpoint) qui peut ensuite être utilisé pour chaque élément au sein de la feuille de style. Par exemple :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
p {
  font-size: 16px;
  @include breakpoint(large) {
    font-size: 18px;
    width: 40em;
    margin: auto;
  }
}
nav li{
  @include breakpoint(large) {
    display: inline-block;
    min-width: 20%;
  }
}

On réutilise ici la possibilité d’imbriquer des media-queries, pour regrouper toutes les propriétés d’un même élément au même endroit, au lieu de les dispatcher un peu partout dans le document. Le mixin évite donc de répéter 50 fois les mêmes media-queries (qui sont parfois bien longues). Je ne sais pas si ça répond à ta question.

Enfin pour les espaces, ça m’intéresse de savoir où (j’ai pourtant essayé de purger toutes les erreurs de typo :honte: ).

+0 -0

Merci pour le complément. Je ne comprends pas trop l’avantage (je ne pense pas qu’il y en a un). Je pense qu’il y a peut être une tendance à lister les fonctionnalités sans le context. C’est sûrement voulu pour tout ce qui est plus avancé. Laquelle des deux méthodes (mixin et imbrication) est le meilleur choix ? D’après ce que tu as écrit, ça serait un mixin pour ne pas se répéter mas je ne vois pas trop la différence. Je devrais peut-être faire des essais.

Concernant les espaces, je dirai que c’est partout. J’ai regardé quelques pages et j’ai remarqué ce pseudo-problème à chaque fois.

+0 -0

Merci pour le complément. Je ne comprends pas trop l’avantage (je ne pense pas qu’il y en a un). Je pense qu’il y a peut être une tendance à lister les fonctionnalités sans le context. C’est sûrement voulu pour tout ce qui est plus avancé. Laquelle des deux méthodes (mixin et imbrication) est le meilleur choix ? D’après ce que tu as écrit, ça serait un mixin pour ne pas se répéter mas je ne vois pas trop la différence. Je devrais peut-être faire des essais.

Concernant les espaces, je dirai que c’est partout. J’ai regardé quelques pages et j’ai remarqué ce pseudo-problème à chaque fois.

Helmasaur

Je n’ai pas encore lu le cours et encore moins le mini-tp, mais un exemple d’utilisation serait :

  • mixin : pour ne pas ce répété, par exemple pour généré les colonnes d’une grille responsive
  • imbrication : pour l’héritage, c’est bien quand tu n’a pas beaucoup d’élément qui ont les mêmes propriétés
+1 -0

Concernant ta question Helmasur, je ne parle dans le TP que d’une seule méthode qui repose sur un mixin ET de l’imbrication. Au contraire, ce mixin pour gérer les points d’arrêt (break points) est plutôt courant. Je me suis inspiré d’un mixin externe qui a quelques années : http://breakpoint-sass.com/ Je ne sais si la page d’explication de Breakpoints Sass t’aidera à comprendre son intérêt. L’idée c’est vraiment d’éviter de répéter des dizaines de fois les mêmes media-queries.

@Heziode : Quand tu parles de mixins pour gérer des colonnes, je suppose que tu penses à des choses comme Susy ou Neat (dont je parle rapidement à la fin du tuto, d’ailleurs). Pour l’imbrication, je suis pas sûr de bien voir ce que tu veux dire par contre.

+0 -0

@Heziode : Quand tu parles de mixins pour gérer des colonnes, je suppose que tu penses à des choses comme Susy ou Neat (dont je parle rapidement à la fin du tuto, d’ailleurs). Pour l’imbrication, je suis pas sûr de bien voir ce que tu veux dire par contre.

Matouche
  • Pour les mixins oui, et aussi c’est aussi ce que j’ai fait sur un de mes projets ou gridle
  • Pour l’imbrication, je fesais référence à l’héritage qu’on peu avoir en programmation orienté objet. Un objet B qui est le fils de A hérite de ses propriété.
+0 -0

Je ne connaissais pas Gridle, merci pour l’info ! Ce qui m’interrogeait pour l’imbrication c’est que tu utilises le mot d’héritage qui désigne un autre concept en Sass (la commande @extend), qui s’inspire effectivement de l’héritage en POO.

Matouche

À oui en effet. Je me rappelé pas qu’il exister celui là :) Il va vraiment falloir que je me mette à l’apprendre sérieusement le SASS (SCSS) :)

+0 -0

En effet tu as raison, ruby-sass est en fin de vie depuis 2019 et il à était signaler de sa mise en fin de vie auparavant.

Ruby n’est plus à utiliser ici, il est plutôt recommandé d’utiliser la version Node.js ou Dart.

Pour la version Node.js:

npm install -g sass

Pour la version Dart:

# Sur Windows
choco install sass

# Sur Macos
brew install sass/sass/sass

Pour plus d’info:

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

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