Initiation à Sass, 2 : rythme vertical

La première partie de cette série présentait les bases de la syntaxe Sass. Passons maintenant aux variables et à l'imbrication des sélecteurs, et créons un rythme vertical dans notre page

Par

Dans la première partie de cette série, je vous ai présenté Sass, un préprocesseur CSS. Je vous ai montré comment mettre en place un projet en utilisant CodeKit pour compiler vos fichiers Sass et nous avons passé en revue les bases de la syntaxe Sass, dont les partiels, les variables, les commentaires et les erreurs.

Dans cette deuxième partie, je vais entrer un peu plus dans les détails des variables en utilisant des opérations sur les variables afin de créer un rythme vertical dans ma page. Je parlerai aussi de l'imbrication des sélecteurs qui rend CSS plus facile à lire et à maintenir.

image


Des variables pour un rythme vertical

Le texte et les éléments de mise en page de mon design sont alignés sur une grille de base 10px que j'ai créée dans Sketch. Idéalement, je voudrais reproduire l'alignement de cette grille dans mon CSS afin d'établir un rythme vertical qui donne une unité à ma page.

image
Si vous travaillez vos designs avec des grilles, il y a des chances que vous utilisiez une grille de ce genre.

J'obtiens cette cohérence en utilisant les variables Sass, qui peuvent contenir des nombres, outre les valeurs textuelles déjà évoquées dans la première partie. En créant une variable égale à une unité de base de 10px, je peux aligner tous les éléments sur une grille de base 10px :

$unit: 10px;

Puis je peux utiliser cette variable avec mon sélecteur paragraphe pour donner à tous les paragraphes une marge du bas égale à 10px :

p {
  margin-bottom: $unit;
}

Ce qui se compile en :

p {
  margin-bottom: 10px;
}

Opérateurs mathématiques

Pour utiliser pleinement ma nouvelle variable $unit, je peux me servir d'opérateurs mathématiques, par exemple le corps de texte de Web Talk Dog Walk a une taille de 15px, soit mon unité de base multipliée par 1,5.

La syntaxe inclut la variable, le symbole de multiplication * et la valeur par laquelle multiplier notre unité :

font-size: $unit*1.5;

Ce qui après compilation nous donne :

body {
  font-size: 15px;
}

Les opérateurs addition (+), soustraction (-), division (/) et pourcentage (%) peuvent également être utilisés pour convertir des unités.

Cette variable de base $unit et les opérateurs mathématiques peuvent nous servir pour de nombreuses règles, en fait pour toutes les règles relatives aux mesures et dimensions : marges, padding, taille de police, hauteur de ligne, etc. :

body {
  background: $grey-mid-light;
  color: $grey-dark;
  font-family: "Adelle Sans", Helvetica, Arial, sans-serif;
  font-size: $unit*1.5;
  line-height: $unit*2.5;
}

h1,
h1 a {
  color: $green-bright;
  font-size: $unit*2.4;
  line-height: $unit*3;
  margin: $unit 0 $unit*2 0;
}

Après compilation :

body {
  background: #eee;
  color: #474747;
  font-family: "Adelle Sans", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 25px;
}

h1,
h1 a {
  color: #97C459;
  font-size: 24px;
  line-height: 30px;
  margin: 10px 0 20px 0;
}

Dans ces exemples, la taille de la police de caractères et la hauteur de ligne sont définies ensemble. Beaucoup de développeurs web préfèrent utiliser une hauteur de ligne sans unité sur le body, pour garantir que la hauteur de ligne reste proportionnelle aux polices déclarées dans la feuille de style. Eric Meyer explique les avantages de cette méthode dans cet article (en anglais). Ici, je veux avoir un contrôle strict de mon rythme vertical, et donc je définis à la fois la taille de police et la hauteur de ligne partout où je modifie la taille de police. Lorsque vous déclarez les hauteurs de lignes avec des unités fixes comme les pixels, il vous faut ajuster la hauteur de ligne à chaque fois que vous modifiez la taille de police, sinon vous risquez de vous retrouver avec des hauteurs de lignes disproportionnées par rapport à votre police de caractères.

Changer des règles multiples

Bien que ma maquette utilise une grille de 10px, le rendu du texte est inévitablement différent dans le navigateur :

image

Je veux augmenter globalement mes polices de caractères, tout en conservant le rythme vertical et la cohérence que j'ai établie dans la maquette. C'est ici que la magie de ma variable de base opère.

En modifiant simplement la variable $unit en 11px, chaque instance de $unit est mise à jour sur l'ensemble du fichier Sass. Après compilation, mes dimensions sont devenues :

body {
  background: #eee;
  color: #474747;
  font-family: "Adelle Sans", Helvetica, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 27.5px;
}

h1,
h1 a {
  color: #97C459;
  font-size: 26.4px;
  line-height: 33px;
  margin: 11px 0 22px 0;
}

Grâce à une simple modification de variable, tout est mis à jour et remis à l'échelle, polices comme hauteur de ligne. Les proportions du design restent intactes.

Syntaxe imbriquée

Sass vous offre plusieurs façon d'organiser votre CSS, dont l'imbrication. Voici la navigation de Web talk Dog Walk :

image

Avec le CSS habituel, les règles pourraient ressembler à ceci, mises dans l'ordre de spécificité :

//CSS
.site-navigation {
  …
}

.site-navigation ul {
  …
}

.site-navigation ul li {
  …
}

.site-navigation ul li a {
  …
}

Pour faciliter la compréhension de la hiérarchie parent-enfant et sa lisibilité, vous pourriez indenter votre code :

//CSS
.site-navigation {
  …
}

  .site-navigation ul {
    …
  }

    .site-navigation ul li {
      …
    }

      .site-navigation ul li a {
        …
      }

Mais Sass va encore plus loin. Les règles peuvent être imbriquées à l'intérieur de leur sélecteur parent. Du coup, vous n'avez pas à répéter la classe .site-navigation :

//SCSS
.site-navigation {
  …

  ul {
    …

    li {
      …

      a {
        …
      }
    }
  }
}

Sass sait que .site-navigation est le parent parce que la règle ul est imbriquée dans les accolades de .site-navigation. C'est beaucoup plus facile à lire, moins répétitif et le résultat après compilation est exactement le même :

//CSS
.site-navigation {
  … }
    .site-navigation ul {
    … }
      .site-navigation ul li {
        … }
        .site-navigation ul li a {
          … }

Dans notre exemple, le code Sass est plus facile à lire que CSS, mais le résultat final est le même. Il répète inutilement les sélecteurs <ul> et <li>, alors qu'il est peu probable qu'on retrouvera d'autres <ul> et <li> dans cette même navigation. Cela nous donne des sélecteurs descendants trop spécifiques, qui peuvent être difficiles à modifier à l'avenir.

NdT : Sur cette question délicate de la bonne utilisation de l'imbrication, Hugo Giraudel a écrit un article passionnant.

Lorsque vous imbriquez les sélecteurs de cette façon, essayez d'éviter les emboîtements inutiles. Idéalement, Sass et CSS devraient dans cet exemple être écrits ainsi :

//SCSS
.site-navigation {
…
  ul {
    …
  }
  li {
    …
  }
  a {
    …
  }
}

ce qui nous donnerait le CSS suivant :

//CSS
.site-navigation {
  … }
.site-navigation ul {
  … }
.site-navigation li {
  … }
.site-navigation a {
  … }

Imbrication des sélecteurs parents

Pour cette navigation, je veux que le lien sélectionné apparaisse clairement, pour aider l'utilisateur à comprendre où il se trouve dans le site :

image

Heureusement, la syntaxe imbriquée nous permet de spécifier un sélecteur combiné à l'intérieur de la hiérarchie, en préfixant le sélecteur imbriqué avec une esperluette (&). Celle-ci représente le parent immédiat de la règle imbriquée, par conséquent cette règle imbriquée génère un sélecteur combiné avec sa règle parente, plutôt que descendant de celle-ci.

Dans Web talk Dog Walk la classe .selected est ajoutée à l'élément li. Dans Sass, la règle &.selected est imbriquée à l'intérieur du sélecteur li :

.site-navigation {
  …
  ul {
    …
    li {
      …

      &.selected {
        a {
          background: $green-dark;
          color: $grey-light;
        }
      }

      a {
        …
      }
    }
  }
}

Ce qui se compile en :

.site-navigation {
  … }
.site-navigation ul {
  … }
.site-navigation li {
  … }
.site-navigation li.selected a {
  background: #3F5526;
  color: #f9f9f9;}
.site-navigation li a {
  … }

Imbrication avec pseudo-sélecteurs

Vous pouvez aussi utiliser & pour inclure les pseudo-classes et pseudo-éléments dans votre Sass imbriqué :

  • &:hover
  • &:active
  • &:focus
  • &:before
  • &:after

J'ai utilisé cette approche pour le survol (hover) et les états actifs dans la navigation de Web Talk Dog Walk :

image
a {
  …
  &:hover, &:active {
    background: $green-bright;
    color: $green-dark;
  }
}

est compilé en :

a {
  … }
a:hover, a:active {
  background: #97C459;
  color: #3F5526;}

Imbrication et media queries

Sur un petit écran, le texte “Brighton” du header et la navigation sont superposés, mais quand la largeur de l'écran dépasse environ 530 px, la navigation n'est pas alignée avec le header “Brighton” :

image

Avec les media queries on peut modifier notre mise en page en fonction de la largeur de l'écran et l'imbrication Sass facilite grandement l'écriture (et la lecture) des media queries par rapport au CSS traditionnel. Dans CSS, les media queries doivent se trouver après les styles de base, au sein d'une nouvelle règle dans laquelle on répète entièrement le sélecteur :

//CSS
.site-header h2 {
  margin: 0 11px;
}

@media only screen and (min-width: 530px) {
  .site-header h2 {
    margin-top: 16.5px;
  }
}

Avec l'imbrication des media queries dans Sass ceux-ci peuvent être imbriqués à l'intérieur du sélecteur sans avoir à répéter toute la règle, simplement en ajoutant la nouvelle propriété et/ valeur (ici encore en utilisant notre variable $unit) :

//SCSS
.site-header {
  h2 {
    margin: 0 $unit;
    @media only screen and (min-width: 530px) {
      margin-top: $unit*1.5;
    }
  }
}

qui sera compilé en :

//CSS
.site-header h2 {
  margin: 0 11px;}

@media only screen and (min-width: 530px) {
  .site-header h2 {
    margin-top: 16.5px;}
}

Sass écrit le CSS répétitif dont nous nous sommes passés dans notre code original. L'imbrication des media queries facilite le travail d'ajustement de nos breakpoints sur certains sélecteurs. Elle permet d'éviter les répétitions, prend moins d'espace et facilite la lecture.


Un petit extra

Les variables d'unités peuvent être utilisées avec les media queries, de façon à ce que les breakpoints soient relatifs aux dimensions du texte et des marges :

@media only screen and (min-width: $unit*53) {
  …
}

sera compilé en :

@media only screen and (min-width: 583px) {
      … 
}

Pièges à éviter

  • Donnez à vos variables des noms signifiants clairs, pour faciliter leur lecture et leur utilisation, et indiquez en commentaire ce que fait la variable.
  • N'imbriquez pas de sélecteurs parents et enfants lorsque vous pouvez utiliser une classe pour faire la même chose.

Choses à faire

  • Imbriquez vos media queries pour rendre vos feuilles de style plus faciles à lire.
  • Utilisez les fonctions de couleurs pour ajuster vos couleurs.

La série d'articles

Intéressé par Sass ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles parus sur Sass dans La Cascade.

Intéressé par Sketch ? Retrouvez des articles et ressources.

Tous les articles parus sur Sketch dans La Cascade.


Ressources complémentaires en français

Présentation de quelques concepts de Sass par Excilys Labs.
Pourquoi Sass et Compass sont des choix judicieux, par Human coders.
Sass, augmentez votre productivité par le blog du webdesign.
Domptez vos CSS avec Sass, par Seemios Blog
Sass: tout sur @extend, par Hugo Giraudel
Sass: mixin ou placeholder ?, par Hugo Giraudel
Sass et interpolation, par Hugo Giraudel
L'imbrication des sélecteurs dans Sass, par Hugo Giraudel

...et un livre de Hugo Giraudel à paraître bientôt ?

Ressources complémentaires en anglais

Sass for beginners, un guide pour installer et utiliser Sass sur Windows
Le livre de Hampton Catlin guide complet de Sass
Le livre de Dan Cederholm Sass for Web Designers
Le livre de Dale Sande et Kianosh Pourian, Sass in the Real World, disponible gratuitement sur GitBook
Sass reference, une meilleure documentation Sass.
Sass & Compass color functions, par Jackie Balzer
Sassmeister, pour jouer avec Sass, Compass et LibSass


original paru le dans Web Standards Sherpa.

Sur l'auteur : est designer chez ind.ie à Brighton au Royaume Uni. Elle passe son temps sur le design et le markup, et à promener son chien plein de poils Oskar. Pour en savoir un peu plus vous pouvez consulter son site perso ou la suivre sur Twitter.

Traduit avec l'aimable autorisation de Web Standards Sherpa et de l'auteur.
Copyright Web Standards Sherpa © 2014.