Un p’tit mixin sass pour débugger facilement un design responsive : il vous affiche une petite boite au-dessus de votre page, pour vous indiquer la largeur actuelle de la page dans l’unité de votre choix.

C’est très pratique pendant l’élaboration d’un design responsive moderne, où vous définissez vos media-queries de manière logique (plus d’infos à ce sujet ici).

Le mixin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@mixin rwdebug( $unit: "em", $positions: top right ) {
    $max: 150;
    @if $unit == "px" {
        $max: 1920;
    }
    @for $i from 10 to $max {
        @media screen and ( min-width: $i * 1#{$unit} ) {
            body:before {
                content: "#{$i}#{$unit}";
                position: fixed;
                @each $property in $positions {
                    #{$property}: 0;
                }
                padding: 1px 3px 3px;
                background: black;
                font: bold 15px/1 sans-serif;
                color: white;
                z-index: 99999;
            }
        }
    }
}

Utilisation

1

@include rwdebug();

Vous pouvez lui passer deux paramètres :

1. Unité: l’unité à observer (px, em, rem)
2. Position: la position du tooltip

Fonctionnement

Le principe est assez simple : le mixin génère une tripotée de media-queries spécifiques au tooltip.

Note: cette façon de faire est évidemment pas optimale pour les performances… mais on parle de debug ici.

Note 2: le mixin est en scss, mais à dire vrai, vous devriez essayer la syntaxe sass.