Mixins SCSS

Des mixins SCSS sont disponibles pour faciliter le développement.

CSS adaptatif (responsive)

Une série de mixins existe pour faciliter l’insertion de media-queries afin d’adapter l’interface du site aux différents appareils du marché.

Variables

Tout d’abord, des variables SCSS définissent différents points d’arrêt entre plusieurs types d’écran :

  • $tablet : largeur minimale des tablettes (769 pixels) ;

  • $desktop : largeur minimale d’un écran d’ordinateur classique (1024 pixels) ;

  • $wide : largeur minimale d’un écran large (1216 pixels) ;

  • $extra-wide : largeur minimale d’un écran full-HD (1408 pixels).

Mixins

Mais concrètement, vous utiliserez surtout les mixins permettant d’inclure automatiquement les media-queries correspondantes à différentes catégories ou ensembles de catégories d’écran. Par exemple, pour écrire du SCSS qui ne sera que pris en compte pour les mobiles, écrivez :

@include mobile {
  // Votre code SCSS…
}

ou encore, en SASS :

+mobile
  // Votre code SASS…

Il est tout aussi possible d’utiliser ceci pour définir tous les CSS spécifiques à une catégorie d’écran d’un coup, ou au fur et à mesure en spécifiant propriété par propriété. Ainsi, ces deux façons de faire sont valides :

.something {
  font-weight: bold;

  @include mobile {
    font-weight: normal;
  }
}

// -- ou --

.something {
  font-weight: bold;
}

@include mobile {
  .something {
    font-weight: normal;
  }
}

Voici les différentes mixins disponibles, avec la largeur de l’écran correspondante. Les noms des mixins reprennent ceux des points d’arrêt plus haut.

Note

Pour des raisons de cohérence, et sauf si vous avez une bonne raison de faire autrement (par exemple, en cas de besoin d’un point d’arrêt très spécifique), utilisez toujours ces mixins pour insérer un code CSS spécifique à une largeur d’écran.

  • mobile : les appareils mobiles.
    0 → 768 pixels
  • tablet : les tablettes, et toutes les tailles au dessus.
    769 pixels → ∞
  • tablet-only : les tablettes, uniquement.
    769 → 1023 pixels
  • until-desktop : les mobiles et les tablettes.
    0 → 1023 pixels
  • desktop : les ordinateurs, toutes tailles d’écran.
    1024 pixels → ∞
  • desktop-only : les ordinateurs, mais pas ceux de grande taille.
    1024 → 1215 pixels
  • until-wide : les mobiles, tablettes, et ordinateurs pas trop grands.
    0 → 1215 pixels
  • wide : les ordinateurs, à partir de ceux ayant un grand écran.
    1216 pixels → ∞
  • wide-only : les ordinateurs ayant un grand écran, mais pas très grand.
    1216 → 1407 pixels
  • until-extra-wide : tous les appareils n’ayant pas un très grand écran.
    0 → 1407 pixels
  • extra-wide : les ordinateurs ayant un écran très grand. Les téléviseurs, aussi.
    1408 pixels → ∞

Si vous étiez habitué⋅e à l’ancien système…

Auparavant, des variables existaient contenant la partie des @media changeante en fonction des largeurs d’écran, et on écrivait les media-queries en entier à chaque fois. Les noms des variables n’étaient pas exactement les mêmes non plus.

Voici donc une correspondance.

Ancienne variable

Mixin équivalente

$media-mobile

mobile

$media-mobile-tablet

until-desktop

$media-tablet

tablet

$media-wide

desktop

$media-under-extra-wide

until-wide

$media-extra-wide

wide

$media-mega-wide

extra-wide