Core - Mixins

Texte

hover

Anticipation de l’introduction de la directive @media (hover:hover) de CSS4 (source: Christopher Rebert).

Quatre mixins inclus :

  • hover
  • hover-focus
  • plain-hover-focus
  • hover-focus-active

Ils ne nous semblent pas d’un intérêt intrinsèque fabuleux mais ils sont utilisés dans plusieurs modules Bootsrap présents dans Scampi.

lists

Trois mixins pour ajouter des variations de listes (source: TwitterBootstrap)

  • list-unstyled : supprime le padding-left et le list-style ;
  • list-inline : distribue les items en ligne grâce à display: inline-block; et ajoute des espaces entre les items pour toute une liste ;
  • list-inline-item : idem que ci-dessus mais pour un seul item de liste.

reset-text

Réinitialise aux réglages par défaut les styles appliqués au texte, sauf la taille des caractères (source: TwitterBootstrap)

screen-reader

Mise à disposition de trois mixins sr-only pour des éléments non visibles sur la page mais lus par les aides techniques.

sr-only

Ce mixin est assorti d’une classe .sr-only (on peut donc utiliser soit le mixin soit la classe).

Il utilise la version la plus robuste connue à ce jour. Voir http://www.ffoodd.fr/cache-cache-css/.

Exemple d’utilisation

<!-- html -->
<a href="http://example.org" target="_blank">
  Vers un autre site <span class="new-window">(nouvelle fenêtre)</span>
</a>
// input scss
.new-window {
  @include sr-only();
}
/* output css */
  .new-window {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

Une classe .sr-only comportant ce mixin est également disponible dans les utilitaires de Scampi (fichier /scampi/core/helpers).

sr-only-visible

Parfois on a besoin de surcharger cette class car finalement l’élément doit être visible dans telle ou telle circonstance (souvent liée au traitement javascript). On dispose d’un mixin de surcharge sr-only-visible. Note : il est préférable d’éviter de se retrouver dans ce cas.

sr-only-focusable

Le mixin sr-only-focusable permet d’introduire les règles nécessaires à ce qu’un élément focusable soit visuellement caché mais apparaisse à la tabulation.

tab-focus

Ce mixin permet de mettre en valeur les focus de façon compatible avec les navigateurs webkit.

text-truncate

Applique un overflow:hidden sur un élément et remplace le texte qui "dépasse" par des points de suspension (source: TwitterBootstrap).

Images

figure

Mixin figure pour le traitement du groupe d’une figure et ses enfants img et caption (dérivé de la class figure de Twitter Bootstrap). Ce mixin est associé à trois paramètres :

  • $img-margin-bottom, par défaut ($spacer-y / 2),
  • $img-line-height, par défaut 1.25,
  • $caption-text-color, par défaut $gray.

image

Mixins pour le traitement responsive ou retina des images (source: TwitterBootstrap).

  • img-fluid et son paramètre $display (par défaut sa valeur est block) : limite la taille de l’image à 100% de la largeur son conteneur si elle est renseignée ;
  • img-retina et ses paramètres $file-1x, $file-2x, $width-1x, $height-1x et utilise ensuite ces paramètres pour servir l’image adaptée aux dpi.

Layout

breakpoints

Mixins permettant de << cibler >> des points de rupture de la map des breakpoints ($grid-breakpoints) définie dans les settings.

Exemples :

Input scss Output
@include media-breakpoint-up(medium) { … } @media and (min-width: 48em) { … }
@include media-breakpoint-max(wide) { … } @media and (min-width: 84em) { … }
@include media-breakpoint-only(small) { … } @media and (min-width: 34em) and (max-width: 34em) { … }
@include media-breakpoint-between(small, large) @media and (min-width: 34em) and (max-width: 60em) { … }

clearfix

Permet de « clearer les floats » (désolés pour le franglais...).

center-block

Centrage horizontal pour un élément de type block par rapport à son conteneur.

Skin

border-radius

Si la variable de configuration $enable-rounded est à true, ce mixin permet d’ajouter des coins arrondis :

  • border-radius($radius) : aux quatre coins ;
  • border-top-radius($radius) : aux deux coins supérieurs ;
  • border-right-radius($radius) : aux deux coins du côté droit ;
  • border-bottom-radius($radius) : aux deux coins inférieurs ;
  • border-left-radius($radius) : devinez quoi ?

Le paramètre de ce mixin ($radius) est fixé par défaut à la valeur de la variable $border-radius indiquée dans les settings du core (4px).

box-shadow

En écrivant les règles de box-shadow à l’intérieur de ce mixin on s’assure qu’elles ne seront prises en compte à la compilation que si la variable de configuration $enable-box-shadow est à true.

Utilisation :

/* input SCSS */
.element {
  @include box-shadow(8px 8px 0px #aaa);
  color: red;
}

Si $enable-box-shadow: true; :

/* output css */
.element {
  box-shadow: 8px 8px 0px #aaa;
  color: red;
}

Si $enable-box-shadow: false; :

/* output css */
.element {
  color: red;
}

transition

Ce mixin fonctionne de façon semblable à celui de box-shadow ci-dessus.

Outils

px-to-em

Convertit les valeurs de px en em, autorise les imbrications de conversion (source Francesco Schwarz).

Exemples d’utilisation :

Input scss Output css
sc-em(16px) 1em
sc-em(32) 2em
sc-em(10px, 1.125) .55556em
sc-em(24px, .875em) 1.71429em
sc-em(12px 0 7em rgba(0, 0, 0, .7), 1.75) .42857em 0 4em rgba(0, 0, 0, 0.7)
sc-em(12px) + sc-em(3em) 3.75em
sc-em(23px, sc-em(53px)) .43396em
sc-em(24px, 1.5 * 1.125) .88889em