Mes mixins Sass

Générateur de font-face, d’arrière-plan teinté, de grille et de media queries

Crédit photo : Tejas Prajapati

Certaines règles CSS peuvent être très ennuyeuses et répétitives à rédiger. Dans ce billet, je vais partager avec vous les mixins que j’ai conçu et qui me servent à écrire plus rapidement en tirant parti des variables et des capacités de calcul de Sass.

Font-face generator

Plus le temps passe, plus la déclaration font-face s’allège. Aujourd’hui, le format woff couvre environ 95% du parc mondial. Néanmoins, si vous devez supporter des vieux navigateurs, ce mixin permet de générer une règle @font-face en donnant une seule fois le chemin de la font désirée.

// Sass
@include font-face("Roboto", "../fonts/roboto/roboto-bold-italic", 700, italic, "maximum" );
// CSS
@font-face {
font-family: "Roboto";
font-style: italic;
font-weight: 700;
src: url("../fonts/roboto/roboto-bold-italic.eot");
src: url("../fonts/roboto/roboto-bold-italic.eot?#iefix") format("embedded-opentype"),
url("../fonts/roboto/roboto-bold-italic.woff2") format("woff2"),
url("../fonts/roboto/roboto-bold-italic.woff") format("woff"),
url("../fonts/roboto/roboto-bold-italic.ttf") format("truetype");
}

Tester le mixin sur Codepen

Telecharger sur Github


Crédit photo : Rene Asmussen

Arrière-plan teinté

Ce mixin génère un filtre de couleur ou en dégradé par dessus une image d’arrière plan.

// Sass avec les paramètres par défaut : filtre noir opaque à 80%
@include bg-tinted("url/to/image.jpg");
// CSS
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("url/to/image.jpg") no-repeat center center;
--
// Sass avec des paramètres personnalisés
@include bg-tinted("url/to/image.jpg", #FFA16B, .55, #FFCAA8, .9, to right);
// CSS
background: linear-gradient(to right, rgba(255, 161, 107, 0.55), rgba(255, 202, 168, 0.9)), url("url/to/image.jpg") no-repeat center center;

Tester le mixin sur Codepen

Telecharger sur Github

Astuce web performance : Quand une zone utilise un filtre de couleur par dessus une image, pensez à tester l’image en qualité zéro pour réduire son poids au maximum.


Media queries

Ce mixin m’a demandé un peu plus de travail de reflexion. Dans le domaine du responsive, il y a plusieurs manière d’écrire ses règles. Nous avons le desktop-first où la media querie est déclaré avec max-width , le mobile-first où c’est min-width qui est utilisé. Parfois, nous avons besoin d’un breakpoint intermédiaire entre x et x pixel et parfois, on a besoin d’un breakpoint vertical.

En centralisant ces besoins, j’ai cherché un moyen de rester le plus simple et le plus lisible possible dans la façon d’utiliser le mixin. La solution que j’ai adopté est l’emploi des prépositions from, until, between ainsi qu’un paramètre height. Au passage, le mixin se charge de faire la conversion pixel / em.

// Sass
@include respond-from(768px) { … }
@include respond-until(1024px) { … }
@include respond-between(600px, 800px) { … }
@include respond-from(500px, height) { … }
// CSS
@media (min-width: 48em) { … }
@media (max-width: 64em) { … }
@media (min-width: 37.5em) and (max-width: 50em) { … }
@media (min-height: 31.25em) { … }

Tester le mixin sur Codepen

Télécharger sur Github


Grille

La plupart des systèmes de grille que j’ai pu voir sont soit trop complexe ou trop rigide parce que ça laisse peu de place à la personnalisation. Qu’est-ce qu’une grille en web design au final ? C’est juste une largeur d’un élément calculée en fonction de la taille des gouttières et du nombre d’item par ligne et . Ni plus, ni moins. Peu importe que vous utilisez float, inline-block ou flexbox.

Dépendances : Sass stripe-unit function

// Sass
div {
// Nombre d'items par ligne, taille de la gouttière
@include grid-item-per-row(4, 1rem);
@include grid-gutter(1rem);
}
// CSS
div {
width: 24%;
width: calc((100% / 4) - 1rem);
margin-left: 1%;
margin-left: calc(1rem * 1);
}

J’ai profité également pour ajouter une touche d’amélioration progressive avec la fonction css calc. Cela permet de placer des gouttières en em/rem et d’obtenir des gouttières verticales et horizontales identiques.

Tester le mixin sur Codepen

Télécharger sur Github

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.