Ir al contenido

Ayuda visual para saber que Media Querie se está aplicando y cuando cambia el breakpoint.

Si usas Sass y eres de los que utilizan variables para nombrar las media queries, te habrá pasado que a veces no sabes cual se está aplicando y donde empieza o acaba un breakpoint.

Yo me he encontrado en ese caso.

Así que se me ocurrió crear una ayuda visual, para saber en todo momento la media queries que se está aplicando y cuando cambia, un poco al estilo de FitWeird

Fácil, usando un pseudoelemento aplicado al body, podemos determinar en que breakpoint estamos.

Pongamos un ejemplo

Las variables podrían ser:

$max-container: 1000px;
$bp-3: 800px;
$bp-2: 600px;
$bp-1: 400px;

El mixin de media queries:

@mixin breakpoint($point) {
    @if $point == $max-container {
        @media (min-width: #{$max-container}) {
            @content;
        }
    } @else if $point == $bp-1 {
        @media (min-width: #{$bp-1}) {
            @content;
        }
    } @else if $point == $bp-2 {
        @media (min-width: #{$bp-2}) {
            @content;
        }
    } @else if $point == $bp-3 {
        @media (min-width: #{$bp-3}) {
            @content;
        }
    }
}

A un pseudo elemento (:before) del body le añadimos algo de estilo y el posicionamiento donde deseamos colocar la información. A continuación mediante media queries, tantas como usemos, vamos modificando el valor de content con la información que queramos mostrar en cada caso.

body{
    &:before{
        position: fixed;
        background-color: #333;
        top: 0;
        left: 0;
        z-index: 10000000;
        color: orange;
        padding: 2px 4px 4px 2px;
        text-transform: uppercase;

        @include breakpoint($bp-1){
            content: "$bp-0b 420";
        }       
        @include breakpoint($bp-2){
            content: "$bp-1 480";
        }
        @include breakpoint($bp-3){
            content: "$bp-1b 540";
        }
        @include breakpoint($max-container){
            content: "$bp-2 600";
        }
    }
}

Uso

El código que hace referencia al body lo guardo en un archivo _debug.scss que importo en la hoja de estilos al final del documento @import "scss/helpers/debug"; por defecto tengo desactivado el archivo comentando el @import y cuando necesito usarlo le quito el comentario.

Si te animas a usarlo no olvides comentarlo antes de subirlo a producción :)

Demo

See the Pen Visual Reference for Mediaqueries by Jose Oliveras (@joliveras) on CodePen.