• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/24/20

Intégrez les types de données Sass

Log in or subscribe for free to enjoy all this course has to offer!

Vous vous souvenez lorsque vous appreniez ce qu’étaient les variables ? Nous avons survolé les types de données disponibles dans Sass, et je vous avais dit de ne pas trop vous occuper des listes et des maps, car on les verrait plus en détail plus tard... Eh bien ça y est, nous y voilà : l’heure des listes et des maps est arrivée !

Découvrez les listes et les maps

Les variables Sass que nous avons vues jusqu’à présent ne stockent qu’une seule valeur : une couleur, une taille, etc. Cela convient très bien pour de nombreux usages, mais qu’en est-il du padding ? Vous pouvez assigner quatre valeurs différentes au sein d'une seule règle :

.block {
  padding: 1rem 2rem 3rem 4rem;
}

Créer une variable pour chaque côté du padding n’aurait aucun intérêt : alerte aux répétitions ! 🚨 Et s’il existait une variable capable de stocker les quatre dimensions ?

$padding-dimensions: 1rem 2rem 3rem 4rem;
.block {
  padding: $padding-dimensions;
}

Une minute ! Ça fonctionne, ça ? 

Regardons le CSS compilé :

.block {
padding: 1rem 2rem 3rem 4rem;
}

Sorcellerie ! 😨

$padding-dimensions  est ce que Sass appelle une liste, ici une liste de valeurs. Cela vous permet de regrouper des valeurs dans une seule variable. Dans le cas présent, nous avons fait une liste des dimensions à utiliser comme valeurs pour une propriété de padding.

Pour créer une liste, il vous suffit de définir une variable et de la remplir avec des valeurs. La syntaxe pour les écrire est extrêmement flexible. Vous pouvez les séparer par des espaces, comme nous l’avons fait pour  $padding-dimesions, ou utiliser des virgules :

$syntax-01: 1rem 2rem 3rem 4rem;
$syntax-02: 1rem, 2rem, 3rem, 4rem;

Vous pouvez aussi les écrire avec ou sans parenthèses, c’est comme vous voulez :

$syntax-01: 1rem 2rem 3rem 4rem;
$syntax-02: 1rem, 2rem, 3rem, 4rem;
$syntax-03: (1rem 2rem 3rem 4rem);
$syntax-04: (1rem, 2rem, 3rem, 4rem);

Toutes ces différentes options seront compilées de la même manière :

$syntax-01: 1rem 2rem 3rem 4rem;
$syntax-02: 1rem, 2rem, 3rem, 4rem;
$syntax-03: (1rem 2rem 3rem 4rem);
$syntax-04: (1rem, 2rem, 3rem, 4rem);
.syntax-01 {
  padding: $syntax-01;
}
.syntax-02 {
  padding: $syntax-02;
}
.syntax-03 {
  padding: $syntax-03;
}
.syntax-04 {
  padding: $syntax-04;
}

 

.syntax-01 {
padding: 1rem 2rem 3rem 4rem;
}
.syntax-02 {
padding: 1rem, 2rem, 3rem, 4rem;
}
.syntax-03 {
padding: 1rem, 2rem, 3rem, 4rem;
}
.syntax-04 {
padding: 1rem 2rem 3rem 4rem;
}

 

Ce n’est pas parce que vous avez décidé de stocker un groupe de valeurs dans une liste que vous voulez forcément toutes les utiliser dans la même instance. Vous pouvez aussi utiliser individuellement les valeurs d’une liste.

Commençons par créer une liste des différentes tailles de texte que nous utilisons dans le site :

$font-size: 7rem 5rem 4rem 2rem;

Maintenant, utilisons la valeur 2rem issue de $font-size pour renseigner la valeur de la taille de texte de nos labels. Pour accéder aux valeurs individuelles d’une liste, utilisez la fonction  nth()  suivie du nom de la liste et l’index de l’élément souhaité au sein de la liste :

$font-size: 7rem 5rem 4rem 2rem;
.form{
  &__field {
      & label {
        font-size: nth($font-size, 4);
      }
  }
}

On veut utiliser la valeur 2rem située dans la liste $font-size pour le label de notre formulaire font-size,  on appelle donc nth($font-size, 4). Pourquoi 4 ? 2rem est la quatrième valeur dans $font-size.

Les listes permettent de regrouper des ensembles de valeurs. Mais si vous revenez sur votre code, disons dans quelques mois, elles peuvent être un peu difficiles à lire. Regarder une liste et essayer de se rappeler l’usage de ses éléments  peut vous filer une bonne migraine ou alors vous forcer à scroller dans toute votre codebase. Dans quelques mois, même dans quelques minutes, vous aurez probablement oublié les indices des différentes valeurs de $font-size. Et c’est normal, mais il existe une solution.

Créez des maps

Les listes sont souvent difficiles à lire et à mémoriser parce qu’il n’y a pas vraiment de contexte pour lister leur contenu, c’est juste un ensemble de valeurs regroupées. C’est pour ça qu’existent les maps de Sass ! Elles sont très semblables aux listes, sauf qu’elles assignent à chaque valeur un nom sous forme d’une paire clé/valeur :

$font-size: (logo:7rem, heading:5rem, project-heading:4rem, label:2rem);

En assignant chaque valeur à une clé, ou un nom,  c’est beaucoup plus simple de se souvenir et de comprendre son utilité. Ici nous avons assigné la valeur 7rem à la clé logo, 2rem à la clé label, etc. Si c’est plus clair, c’est plus simple. Si c’est plus simple, c’est mieux .👍 

Pour ceux d’entre vous qui connaissent d’autres langages informatiques, sachez qu’en Sass les maps sont l’équivalents des hashs, ou objets en JavaScript, mais ne portent juste pas le même nom.

Les règles sont beaucoup plus strictes pour écrire des maps que pour les listes. Avec les listes, à peu près tout est optionnel (les parenthèses, les virgules...).

Mais le contenu des maps doit être entouré d’une paire de parenthèses et doit utiliser des virgules pour séparer les paires clé/valeur :

$map: (
  key-01: value-01,
  key-02: value-02,
  key-03: value-03
);

Pour accéder à la valeur d’une map, c’est aussi un peu différent. Avec les maps, il faut utiliser la fonction  map-get() ; celle-ci nécessite deux arguments : le premier est le nom de la map (ici $font-size), et le second est le nom de la clé (ici label).

$font-size: (logo:7rem, heading:5rem, project-heading:4rem, label:2rem);
.form{
  &__field {
    & label {
        font-size: map-get($font-size, label);
      }
  }
}

Le résultat final sera toujours 2rem compilé en tant que taille de police dans le CSS :

.form__field label {
font-size: 2rem;
}

Allez, testons un peu nos nouvelles compétences maps en créant une map nommée $input-txt-palettes, qui contient les palettes de couleurs pour tous nos inputs de texte. Regroupez les palettes de couleurs par état (principale, secondes), puis créez une clé pour chaque pseudoclasse  : active,   focus  et   invalid  (active, focus, invalide) :

$colour-primary: #15DEA5;
$colour-secondary: #001534;
$colour-accent: #D6FFF5;
$colour-white: #fff;
$colour-invalid: #DB464B;

$txt-input-palette: (
  active: ,
  focus: ,
  invalid:
);

Vous avez créé des clés, sauf qu’elles sont vides. Souvenez-vous : il s’agit de paires clé/valeurs. Nous avons nos clés, il nous faut maintenant leur assigner des valeurs. Pour assigner vos palettes de couleurs à chaque clé, cela nécessite de nester une autre map pour les couleurs dans chacune des clés.

Eh oui, des maps dans les maps ! Inception. 🤯

Vous pouvez assigner n’importe quel type de données Sass comme valeurs dans vos maps (ou listes). Vos inputs de texte doivent stocker trois couleurs distinctes, du coup chaque clé contiendra elle-même une clé avec trois valeurs : les couleurs de la bordure, du fond et du texte :

$colour-primary: #15DEA5;
$colour-secondary: #001534;
$colour-accent: #D6FFF5;
$colour-white: #fff;
$colour-invalid: #DB464B;
$txt-input-palette: (
  active: (
      bg: $colour-primary,
      border: $colour-primary,
      txt: $colour-white,
  ),
  focus: (
      bg: $colour-primary,
      border: $colour-primary,
      txt: $colour-white,
  ),
  invalid: (
      bg: $colour-invalid,
      border: $colour-white,
      txt: $colour-white,
  )
);

Vous avez maintenant une variable qui contient toutes les informations de couleurs pour les différents états de votre texte (active, focus, invalid), dans un format qui est facile à lire mais surtout facile à retenir. Si vous avez besoin de modifier les états ou les valeurs, ils sont tous regroupés au même endroit dans un seul bloc : 1 000 fois plus simple à retrouver de cette façon que de scroller dans toute votre codebase non ?

Utilisez les mixins avec les maps

Toutes vos couleurs pour les différents états de vos input textes sont stockées dans une variable et elles sont prêtes pour la bataille ! Pour vous faciliter un peu la tâche, créons une mixin pour déployer ces palettes. Pour cela, vous devez assigner des règles pour les propriétés border,  background-color et color du texte, avec les bonnes valeurs issues de  $txt-input-palette.

@mixin txt-input-palette {
  border: .1rem solid $border;
  background-color: $bg;
  color: $txt;
}

Pour déclarer de quel état (hover, etc.) obtenir les informations, vous devez assigner un argument pour l’état que vous pouvez passer dans la mixin :

@mixin txt-input-palette($state) {
  border: .1rem solid $border;
  background-color: $bg;
  color: $txt;
}

Aux côtés du nom de l’état, vous pouvez stocker sa map de palette dans une variable nommée  $palette  :

@mixin txt-input-palette($state) {
  $palette: map-get($txt-input-palette, $state);
  border: .1rem solid $border;
  background-color: $bg;
  color: $txt;
}

À présent,  $palette  contient une map des valeurs de couleurs pour  bg,   border  et   txt  de l’état assigné. Vous pouvez l’utiliser avec la fonction  map-get()  pour remplir les valeurs de couleur de votre ensemble de règles :

@mixin txt-input-palette($state) {
  $palette: map-get($txt-input-palette, $state);
  border: .1rem solid map-get($palette, border);
  background-color: map-get($palette, bg);
  color: map-get($palette, txt);
}

Et voilà ! Vous avez une mixin utilisable pour mettre en forme tous les éléments de texte et les pseudo-sélecteurs simplement en passant l’état quand vous appliquez la mixin ! Ceci vous aidera à ce que votre code soit maintenable et facile à modifier à l’avenir.

Appliquons la mixin à votre sélecteur par défaut et inactif form__txt input  :

@mixin txt-input-palette($state) {

  $palette: map-get($txt-input-palette, $state);
  border: .1rem solid map-get($palette, border);
  background-color: map-get($palette, bg);
  color: map-get($palette, txt);
}
.form {
  &__field {
      & input {
        @include txt-input-palette(focus);
      }
  }
}

Maintenant, vous devriez voir dans le CSS compilé le sélecteur  .form__field input, rempli avec des règles pour  border,  background-color et  color  pour le texte :

.form__field input {
border: 0.1rem solid #15DEA5;
background-color: #001534;
color: #15DEA5;
}

Parfait !

Essayez par vous-même !

Mettez en application vos nouvelles connaissances dans cet exercice où vous devez conserver les couleurs des boutons, tout en adaptant le code avec les listes et les maps.

https://api.next.tech/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=b114d952-943c-4a21-a074-7949d7402bc6

En résumé

  • Les listes et les maps sont des collections de valeurs.

  • Les listes ont une syntaxe très flexible ; on peut utiliser ou non des virgules, ou rien. Pareil pour les parenthèses.

  • On accède aux valeurs d’une liste en appelant leur index via la fonction nth() 👉🏼 nth($list, index).

  • En Sass, les indexs des listes commencent à 1.

  • Les maps sont semblables aux listes, sauf que chaque valeur reçoit un nom qu’on appelle une clé :  $map(key: value).

  • Les maps ont une syntaxe beaucoup moins permissive que les listes. Les maps doivent utiliser des parenthèses et virgules.

  • On accède aux valeurs d’une map via la fonction map-get() 👉🏼  map-get($map, key).

  • Les maps et les listes peuvent contenir n’importe quel type de données Sass, y compris d’autres listes et maps.

À présent, vous avez une mixin avec laquelle vous pouvez créer des propriétés pour chaque état de vos inputs texte ouuuuu vous pourriez aussi l’automatiser, n’est-ce pas ? Ce serait nettement moins fastidieux, et beaucoup plus classe ! 😎

Quelle coïncidence – c’est exactement ce que nous ferons dans le prochain chapitre !

Example of certificate of achievement
Example of certificate of achievement