Astuce: SASS et Responsive web design

Si vous développez un site mobile usant du responsive web design, vous être sûrement tombé sur l'épineuse question du support multi-browser. Cette question est particulièrement importante dans le cas d'un stratégie "mobile first" puisque sans solution, un utilisateur d'IE 8 se retrouvera sur notre site mobile.

À cette fin, afin d'éviter de développer manuellement deux feuilles de styles distinctes, il est générallement avantageux de simplement retirer les media queries d'une feuille de style réservée uniquement aux vieilles versions d'Internet Explorer.

C'est dans ce but que j'ai crée la mixins suivante faisant usage de fonctionnalités présente dans la dernière version de SASS (3.2 à ce jour).

Tout commence avec SASS et une mixin

Tout prend place dans une simple mixin:

$ie: false !default;

@mixin mq( $point, $force: false ) {

    @if $force == true {
        @media ( $point ) { @content; }
    } @else if $ie == true {
        @content;
    } @else {
        @media ( $point ) { @content; }
    }
}

Ensuite, pour l'utilisez, vous remplacez simplement vos media-queries par un appel à cette mixin:

@include mq( "min-width: 650px" ) {
    .element {
        width: auto;
    }
}

Si vous voulez que les règles contenues dans votre media querie soit ignorées, alors passez true comme second paramètre. Cela pourrait être utile si vous adaptez certaines règles de style dans le cas d'une résolution élevée.

L'intégrer dans votre responsive design

En pratique, j'organiserai mes fichiers ainsi:

└─── sass/
      ├─── helpers/
      │         └─── _mixins.scss
      ├─── modules/
      │         └─── # Fichiers uniques au projet
      ├─── main.scss
      └─── ie.scss

J'ajouterai la mixin précédente au fichier mixins.scss, mais la magie se produit plutôt au sein de main.scss et ie.scss.

Au sein de main, j'importe toutes mes feuilles nécessaires au fonctionnement du site.

main.scss

    @import "helpers/mixins";
    @import "helpers/fonts";

    @import "modules/module_a";
    @import "modules/module_b";

Et au sein de ie, j'écris deux lignes:

ie.scss

    $ie: true;
    @import "main";

Et voilà, il ne vous reste plus qu'à intégrer vos feuilles de styles avec commentaires conditonnels au haut de votre page:

index.html

<!--[if (gt IE 8) | (IEMobile)]><!-->  
    <link rel="stylesheet" media="all" href="assets/css/main.css" />
<!--<![endif]-->  
<!--[if (lt IE 9) & (!IEMobile)]>  
    <link rel="stylesheet" media="all" href="assets/css/ie.css" />
<![endif]-->

Conclusion

J'espère que ceci aura aider certains d'entre vous à répondre à l'épineuse question du support cross-browser lorsque l'on travaille sur un projet "mobile first".

Si vous avez vous-même des techniques similaires, n'hésitez pas à les laisser en commentaires !

Bonne programmation !