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 :

$tiny : largeur maximale des très très petits écrans (penser iPhone SE) (419 px) ;
$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.

tiny : les très petits appareils mobiles.

0 → 418 pixels
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`

Listes au format horizontal (`horizontal-list`)

Cette mixin CSS sert à transformer n’importe quelle liste (numérotée ou non, de toute façon les puces seront masquées) en liste horizontale.

Conceptuellement, une liste de ce genre :

<ul class="my-horizontal-list">
    <li>Premier</li>
    <li>Second</li>
    <li>Troisième</li>
</ul>

avec le CSS suivant :

.my-horizontal-list {
    @include horizontal-list;
}

sera affichée ainsi si cette mixin est appliquée.

Premier • Second • Troisième

Vous pouvez personnaliser le séparateur ainsi que la distance entre les éléments. Par défaut, une puce (•) et une distance de 16 sont utilisées.

.my-horizontal-list {
    @include horizontal-list($gap: $length-32, $separator: " — ");
}