Un @mixin Sass pour adapter les tailles au responsive design

Dans mon dernier projet, j’avais besoin de ramener les mesures de certains éléments à 60 % pour les adapter aux navigateurs mobiles.

Au début, j’ai essayé avec les unités « rem » de CSS, mais cela ne semblait pas fonctionner comme prévu dans le navigateur Android :S (cela marche très bien sur le dernier iOS 6, Firefox mobile, et Chrome et Firefox sur ordinateur. J’ai arrêté mes tests dès que cela a échoué dans le navigateur Android).

L’alternative était de le faire avec les unités « pixel » en CSS pur, mais c’est une vraie galère. Il faut calculer toutes les mesures « à la main » et redéclarer les éléments dans les media queries. Le pire, c’est s’il faut changer le pourcentage après coup… car il faut recalculer toutes les mesures, ce qui empêche de procéder par tâtonnements (enfin, c’est possible, mais long)…

Je suis donc passé à Sass et j’ai créé un mixin qui génère automatiquement les media queries à partir de la taille de chaque élément :

 1$responsive_resize: 0.6;
 2$px:1px;
 3
 4@mixin res($rpx) {
 5    $px: $rpx;
 6    @content;
 7    @media screen and (max-width: 320px) {
 8        $px: $rpx*$responsive_resize;
 9        @content;
10    }
11}

Pour l’utiliser dans mes éléments :

1.myclass {
2  @include res(400px) { width: $px; }
3}

Notez que je place la mesure de l’élément entre parenthèses, et les propriétés suivies de la variable $px entre accolades.

Voici le résultat quand on compile le fichier scss en css :

1.myclass {
2  width: 400px; }
3  @media screen and (max-width: 495px) {
4    .myclass {
5      width: 240px; } }

Le problème, c’est qu’à chaque utilisation du mixin, une nouvelle entrée de media query est créée dans votre css :

1.myclass {
2  @include res(400px) { width: $px; }
3  @include res(200px) { height: $px; }
4}

1.myclass {
2  width: 400px;
3  height: 200px; }
4  @media screen and (max-width: 495px) {
5    .myclass {
6      width: 240px; } }
7  @media screen and (max-width: 495px) {
8    .myclass {
9      height: 120px; } }

Je n’ai pas trouvé de moyen de résoudre ce problème, mais cela fonctionne bien dans tous les navigateurs (je n’ai remarqué aucun problème de performance, mais je préfère un code propre, et si vous l’utilisez beaucoup, cela augmentera aussi le poids de votre fichier css. Si vous connaissez un moyen de résoudre ce problème, n’hésitez pas à me le dire 🙂).

Je peux maintenant modifier facilement les mesures de tous mes éléments pour les mobiles ou les tablettes en même temps, en changeant la variable $responsive_resize.