Initiation à Sass, 3 : mixins et placeholders

Laura Kalbag conclut son introduction à Sass avec les mixins et les placeholders, et la présentation de bibliothèques de mixins comme Compass et Bourbon. Maintenant, c'est à vous de jouer

Par

Dans la première partie de cette série, je vous ai présenté CodeKit et les bases de Sass, telles que les partiels, les variables, les commentaires et les erreurs. Dans la deuxième partie, je vous ai montré comment parvenir à un rythme vertical en utilisant des variables et des opérateurs mathématiques, et je vous ai montré comment la syntaxe imbriquée de Sass améliorait l'écriture et la maintenance des media queries.

Dans cette troisième partie, je vais explorer les mixins et les placeholders, et vous montrer comment utiliser des frameworks pour importer des mixins intéressants et accélérer votre développement.

image


Les mixins

Voici un autre élément clé de Sass, qui peut s'avérer extrêmement puissant. Pour faire simple, les mixins sont des regroupements de règles CSS ou Sass, que l'on peut réutiliser dans la feuille de style. Si les règles constituant le mixin sont modifiées, le résultat compilé sera modifié partout où le mixin aura été utilisé, ce qui vous épargnera beaucoup de temps et évitera des répétitions.

On définit un mixin avec la directive @mixin, suivie d'un nom unique que vous choisissez. Les accolades contiennent les déclarations de styles qui constituent le mixin :

@mixin mixin-name {
  margin: 0;
  padding: 0;
}

Vous référencez ensuite ce mixin dans votre Sass en l'incluant dans une règle avec @include suivi du nom que vous avez donné au mixin :

ul {
  @include mixin-name;
}

Et lorsque vous compilez, le CSS qui en résulte est :

ul {
  margin: 0;
  padding: 0;
}

Mixins et variables

Vous pouvez utiliser les variables dans vos mixins pour créer des bouts de code CSS qui varient légèrement à chaque fois qu'ils réapparaissent. Prenons par exemple ces boutons de navigation qui partagent quelques styles fondamentaux et présentent quelques variations :

image
Ces boutons ont le même style, mais des textes et des couleurs de background différents

Si vous écriviez votre CSS habituel, les règles relatives à ces boutons pourraient ressembler à ceci :

//CSS
.button {
  border-radius: 10px;
  padding: 0 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.active-button {
  background: #637a3d;
  color: #c0d0aa
}

.inactive-button {
  background: #3f5526;
  color: #f9f9f9;
}

Et votre HTML référencerait deux classes pour appliquer à la fois le style de base et ses variations :

//HTML
<a class="button active-button" href="">Button</a>

Avec les mixins de Sass, vous pouvez regrouper ces règles communes dans un même mixin, en spécifiant leurs textes et backgrounds différents à l'aide de variables. D'abord, définissons notre mixin, en lui donnant un nom, puis une liste des variables à utiliser, entre parenthèses et séparées par une virgule :

@mixin button($text, $background) {
}

Ensuite, à l'intérieur des accolades de notre mixin, ajoutons les propriétés et valeurs communes :

@mixin button($text, $background) {
  border-radius: 10px;
  padding: 0 15px;
  text-decoration: none;
  text-transform: uppercase;
}

Enfin, pour les styles qui vont varier, utilisons des variables pour les valeurs des propriétés concernées :

@mixin button($text, $background) {
  background: $background;        //variable
  border-radius: 10px;
  color: $text;                   //variable
  padding: 0 15px;
  text-decoration: none;
  text-transform: uppercase;
}

Et maintenant, appliquons le mixin à chaque bouton en utilisant la directive @include et en remplaçant les noms de variables $text et $background par les valeurs que vous voulez utiliser, qui peuvent être elles-mêmes des variables définies ailleurs dans Sass. Ici, j'utilise les variables de couleurs que j'ai définies dans la première partie :

.active-button {
  @include button($green-mid, $green-light);
}

Il faut les entrer dans l'ordre défini à la création du mixin, donc ici ma première valeur est la couleur du texte, et la deuxième est la couleur de background. Nos deux variantes de boutons peuvent maintenant utiliser le même mixin avec des valeurs de couleurs différentes :

.active-button {
  @include button($green-mid, $green-light);
}

.inactive-button {
  @include button($grey-light, $green-dark);
}

Voici le CSS après compilation :

.active-button {
  border-radius: 10px;
  background: #637a3d;
  color: #c0d0aa
  padding: 0 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.inactive-button {
  border-radius: 10px;
  background: #3f5526;
  color: #f9f9f9;
  padding: 0 15px;
  text-decoration: none;
  text-transform: uppercase;
}

Mixins ou Placeholders ?

Pour le site Web Talk Dog Walk, j'utilise un mixin pour cacher un certain contenu tout en en permettant l'accès aux lecteurs d'écran (ceux-ci ne pourraient pas lire un contenu caché via display: none) :

@mixin hide {
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

Le mixin hide est un ensemble pratique de règles et n'est spécifique à aucun élément HTML. Cela signifie que je peux l'utiliser pour de nombreux éléments sur le site :

.site-title {
  @include hide;
}

.skip-link {
  @include hide;
}

Malheureusement, le résultat est une répétition inutile de code, qui gonfle mon fichier CSS. C'est ici que les placeholders s'avèrent pratiques.

Placeholders

Les placeholders sont très proches des mixins, mais ils ne fonctionnent pas avec des variables. Plus important, le rendu d'un placeholder est regroupé dans une règle unique de notre CSS compilé. On définit un placeholder avec un % suivi d'un nom unique. Les accolades contiennent les déclarations de styles propres à ce placeholder :

%hide {
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

Pour inclure les styles du placeholder dans une règle, on utilise la directive @extend :

.site-title {
  @extend %hide;
}

.skip-link {
  @extend %hide;
}

Cette approche est donc très similaire à l'approche mixin, mais la différence est dans le rendu CSS, le placeholder %hide étant compilé en une règle unique :

.site-title, 
.skip-link {
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

Sass va chercher tous les sélecteurs concernés par le placeholder et les agrège en une règle unique en appliquant les styles du placeholder à tous les éléments. La répétition est supprimée, votre feuille de style est plus réduite et la performance est améliorée.

NdT : Pour une étude en profondeur des mixins et des placeholders, vous pouvez consulter l'excellent article d'Hugo Giraudel ici-même.

Utiliser les mixins pour les préfixes constructeurs

On utilise souvent les mixins pour inclure automatiquement les préfixes constructeurs. De nombreuses propriétés CSS nécessitent l'ajout d'un préfixe pour fonctionner avec certains navigateurs. Par exemple les transitions CSS :

//CSS
a {
  background-color: #ff3000;
  -webkit-transition: background-color 1s ease;
  -moz-transition: background-color 1s ease;
  -ms-transition: background-color 1s ease;
  -o-transition: background-color 1s ease;
  transition: background-color 1s ease;
}

a:hover {
  background-color: #ff9500;
}

Rester à jour des changements intervenant dans les navigateurs demanderait beaucoup de travail, il y a énormément de préfixes constructeurs, des différences subtiles de syntaxe, et il y a beaucoup de répétition. Heureusement, il existe des frameworks et bibliothèques Sass qui se tiennent à jour de toutes les évolutions de navigateurs. Les bibliothèques Sass sont des ensembles de mixins que vous pouvez utiliser dans vos feuilles de style. Deux des bibliothèques les plus connues sont Compass et Bourbon.

Ajouter Bourbon à un projet

Vous pouvez installer Bourbon comme un gem de Ruby avec la console, mais si vous utilisez CodeKit, tout est déjà inclu. Pour ajouter Bourbon dans un projet Codekit, rien de plus facile, il suffit de l'importer: @import "bourbon";.

J'inclus généralement Bourbon avant mes partiels dans mon fichier Sass principal :

@import "bourbon";
@import "mixins.scss";
@import "variables.scss";
@import "reset.scss";
@import "fonts.scss";
@import "base.scss";
@import "header.scss";
@import "illustration.scss";
@import "layout.scss";

Une fois Bourbon importé, vous pouvez utiliser tous les mixins que vous trouverez dans la documentation de Bourbon, par exemple les transitions CSS :

a {
  background-color: #ff3000;
  @include transition (background-color 1.0s ease);

  &a:hover {
    background-color: #ff9500;
  }
}

qui sera compilé en :

a {
  background-color: #ff3000;
  -webkit-transition: background-color 1s ease;
  -moz-transition: background-color 1s ease;
  -ms-transition: background-color 1s ease;
  -o-transition: background-color 1s ease;
  transition: background-color 1s ease;
}

a:hover {
  background-color: #ff9500;
}

NdT : Comme le savent les habitués de la Cascade, vous pouvez également utiliser l'incontournable Autoprefixer, qui est d'ailleurs présent dans CodeKit. Il vous suffit de cocher l'option Autoprefixer et vous pouvez oublier à jamais les problèmes de préfixes constructeurs.

Commencez petit, mais commencez!

Sass est très puissant et de nouvelles fonctionnalités sont régulièrement ajoutées. Mais on peut commencer à l'utiliser sans y connaître grand chose, et s'habituer à son fonctionnement, voir comment ça marche, puis l'explorer pour découvrir de nouvelles fonctionnalités. Je vous recommande de commencer avec les variables de couleurs (première partie) ou par l'imbrication des media queries (deuxième partie). Bientôt, vous écrirez vos mixins comme un pro !

Un petit extra

Sass vous permet d'écrire vos propres fonctions personnalisées. Elles peuvent s'avérer utiles pour intégrer Sass dans d'autres langages et technologies et la syntaxe est assez simple si vous avez déjà une petite expérience de la programmation. Cependant, je n'utilise pas de fonctions personnalisées dans mon propre travail car je trouve que la programmation rend plus abstraite la lisibilité des feuilles de style. J'utilise Sass avant tout pour éviter les répétitions, et faciliter la maintenance, donc l'ajout de complexité va à l'encontre de ce que je cherche.

Cependant, il y a beaucoup de gens intelligents et passionnés qui créent des fonctions personnalisées si vous voulez plonger plus avant dans Sass. Parmi eux, Hugo Giraudel tient à jour une formidable liste de liens relatifs à Sass sur Github.

Pièges à éviter

  • Évitez d'utiliser des mixins lorsqu'un placeholder ferait l'affaire. L'utilisation à répétition du même mixin avec les mêmes variables gonflera inutilement votre CSS

Choses à faire

  • Utilisez un framework comme Compass ou Bourbon pour leurs mixins déjà prêts.
  • Comprenez la différence entre les mixins et les placeholders pour éviter les répétitions inutiles et les répétitions dans votre feuille de styles.

La série d'articles

Intéressé par Sass ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles parus sur Sass dans La Cascade.

Intéressé par Sketch ? Retrouvez des articles et ressources.

Tous les articles parus sur Sketch dans La Cascade.


Ressources complémentaires en français

Présentation de quelques concepts de Sass par Excilys Labs.
Pourquoi Sass et Compass sont des choix judicieux, par Human coders.
Sass, augmentez votre productivité par le blog du webdesign.
Domptez vos CSS avec Sass, par Seemios Blog
Sass: tout sur @extend, par Hugo Giraudel
Sass: mixin ou placeholder ?, par Hugo Giraudel
Sass et interpolation, par Hugo Giraudel
L'imbrication des sélecteurs dans Sass, par Hugo Giraudel

...et un livre de Hugo Giraudel à paraître bientôt ?

Ressources complémentaires en anglais

Sass for beginners, un guide pour installer et utiliser Sass sur Windows
Le livre de Hampton Catlin guide complet de Sass
Le livre de Dan Cederholm Sass for Web Designers
Le livre de Dale Sande et Kianosh Pourian, Sass in the Real World, disponible gratuitement sur GitBook
Sass reference, une meilleure documentation Sass.
Sass & Compass color functions, par Jackie Balzer
Sassmeister, pour jouer avec Sass, Compass et LibSass
Using pure Sass functions to make reusable logic more useful, par Mason Wendell


original paru le dans Web Standards Sherpa.

Sur l'auteur : est designer chez ind.ie à Brighton au Royaume Uni. Elle passe son temps sur le design et le markup, et à promener son chien plein de poils Oskar. Pour en savoir un peu plus vous pouvez consulter son site perso ou la suivre sur Twitter.

Traduit avec l'aimable autorisation de Web Standards Sherpa et de l'auteur.
Copyright Web Standards Sherpa © 2014.