Faire du Responsive Design avec Compass et SASS

Cet article s’adresse aux personnes qui connaissent le framework CSS Compass et qui savent comment fonctionne le Responsive Design (notamment avec les Media Queries). Amis web-designer, je vais vous présenter comment Compass pour faire du Responsive Design.

Ce tutoriel n’a pas vocation à vous montrer toute la puissance de Compass ni a explorer toutes les possibilités et les subtilités du Responsive Design. Je vais simplement vous monterune façon de combiner les « mixins », les variables et les « include » de Compass avec les Media Queries pour vous simplifier la mise en place d’un Responsive Design.

Pour l’exemple, je ne vais considérer qu’une seule donnée de mon design : la largeur des colonnes. A vous d’adapter ce tutoriel pour y ajouter toutes les variables que vous souhaitez (taille des typos, margin, padding…). Mais en général, toutes vos données vont pouvoir être calculées sur la base d’une seule variable qui peut être comme ici la largeur des colonnes.

Prenons un layout qui s’appuie sur une grille de mise en page de 6 colonnes. J’aimerais que :

• pour les écrans inférieurs à 960px, mes colonnes fassent 150px
• pour les écrans supérieurs à 1800px, mes colonnes fassent 300px
• pour les écrans intermédiaires, mes colonnes soient proportionnelles (= 100/6 %)

J’ai donc besoin au final de 3 fichiers CSS (je trouve plus simple et plus élégant de dissocier les fichiers CSS) :

• to960.css
• from960to1800.css
• from1800.css

Avec ces 3 fichiers, je peux donc écrire les 3 media queries suivantes :

• <link href="to960.css" rel="stylesheet" type="text/css" 
  media="only screen and  (max-width: 960px)">

• <link href="from960to1800.css" rel="stylesheet" type="text/css" 
  media="only screen and  (min-width: 961px) and (max-width:1789px)">

• <link href="from1800.css" rel="stylesheet" type="text/css" 
  media="only screen and  (min-width: 1800px)">

Le contenu de chacun des fichiers CSS devraient donner au final un truc comme ça :

• Dans to960.css

  .col { width: 150px; }

• Dans from960to1800.css

  .col { width: 16.67%; }

• Dans from1800.css

  .col { width: 300px; }

Pour que Compass génère ces fichiers CSS, il vous faut les fichiers suivants :

• _global.scss
• to960.scss
• from960to1800.scss
• from1800.scss

Et voyons maintenant le contenu de ces fichiers SCSS :

• Dans _global.scss

  @mixin responsive($unit) {
     .col { width: $unit; }
  }

• Dans to960.scss

  @import "global";
  $w = 150px;
  @include responsive($w);

• Dans from960to1800.scss

  @import "global";
  $w = (100/16)%;
  @include responsive($w);

• Dans from1800.scss

  @import "global";
  $w = 300px;
  @include responsive($w);

Et voilà le tour est joué. Evidemment cette technique est intéressante uniquement si vous avez à la fois beaucoup de media-queries et beaucoup de variables. Votre Responsive Design s’organise alors avec :

• Un fichier SCSS global qui contient les règles CSS sous forme de Mixins ou de Functions. C’est le fichier le plus important, celui qui dessine vos layouts.
• Des fichiers SCSS pour chaque media -queries qui sont très sobres : ils ne contiennent que la variable et l’appel aux mixins et functions du fichier global.

On pourrait par exemple avoir les codes suivants :

• Dans le fichier SCSS global :

  $w960 = 150px;
  $w980 = 160px;
  $w1080= 180px;
  
  @function fontSize($u) {
     @return $u/10;
  }
  
  @mixin fontDefition($u) {
     font-size: fontSize($u);
     line-height: 1.2em;
  }
  
  @mixin layout($u) {
     width: $u;
     padding: $u/10 $u/15;
  }
  

• Dans le fichier SCSS d’une media query :

  @import "global";
  $width = $w960;
  @include fontDefition($width);
  @include layout($width);
  

Si votre Responsive Design est assez complexe, vous allez vite vous rendre compte de l’utilité d’une structure comme celle-ci. Les fichiers SCSS des medias-queries sont définies au début du projet, ils sont très légers et ne vont pas beaucoup évoluer dans le temps. Et vous pouvez alors vous focaliser sur le fichier global qui contient finalement toutes les règles CSS importantes.

Enfin, pour compléter cet article, je vous invite à lire Responsive Web Design in Sass: Using Media Queries in Sass 3.2 qui explore d’autres pistes intéressantes. Et si vous avez une autre façon de jouer avec Compass/SASS pour faire du Responsive Design, je vous invite à la partager avec nous dans les commentaires.