Responsive

<< Funciones de colores Directivas >>

El diseño responsive se ha convertido en una práctica muy común hoy en día. Uno de los ejemplos típicos es el de conocer las características del dispositivo para, dependiendo del mismo, utilizar un estilo u otro.

Vamos a ver un ejemplo básico de cómo funciona una media query en CSS:

.sidebar {
    border: 1px solid #ccc;
}
@media (min-width: 700px) { /* Para los dispositivos con al menos 700px de ancho */
    .sidebar {
        float: right;
        width: 30%;
    }
}

Si nos fijamos estamos modificando el .sidebar dependiendo de la resolución del dispositivo. Con Sass una media query la haríamos:

.sidebar {
    border: 1px solid #ccc;
    @media (min-width: 700px) {
        float: right;
        width: 30%;
    }
}

Podemos combinar fácilmente las media queries con mixins utilizando la directiva @content. Lo que hacemos con esta directiva es incluir un bloque de propiedades dentro un mixin. Por ejemplo:

@mixin respond-to {
    @media (min-width: 700px) {
        @content;
    }
}

.sidebar {
    border: 1px solid #ccc;
    @include respond-to {
        float: right;
        width: 30%;
    }
}

Una de las prácticas más frecuentes en estos casos es enviar al mixin un argumento sobre el media, de forma que se realice esta comprobación, por ejemplo, aplicar un estilo sólo si estamos usando una tablet:

@mixin respond-to($media) {
    @if $media == tablet {
        @media (min-width: 700px) {
                @content;
        }
    }
}
.sidebar {
    border: 1px solid #ccc;
    @include respond-to(tablet) {
        float: right;
        width: 30%;
    }
}

En esta declaración podríamos añadir un else o else if si queremos seguir realizando comprobaciones para los diferentes dispositivos. Sin embargo, esto no es todo lo flexible que debería. Una solución más correcta sería:

@mixin respond-to($media) {
    @if $media == tablet {
        @media (min-width: 700px) {
                @content;
        }
    }
}
.sidebar {
    border: 1px solid #ccc;
    @include respond-to(tablet) {
        float: right;
        width: 30%;
    }
}

Con esto, lo que conseguimos es que se incluya si se cumple con el ancho mínimo que nosotros definimos, de forma que podamos usar este mixin en cualquier lugar donde tengamos un estilo para un valor min-width. Pero si queremos que por ejemplo este mixin no sólo se use para un mínimo, sino que pueda ser para un máximo también, la posibilidad que tenemos para modificarlo sería:

@mixin respond-to($val, $query){ 
    @media($val: $query){
        @content;
    }
}
.sidebar{
    border: 1px solid #ccc;
    @include respond-to(max-width, 600px){
        float: right;
        width: 30%;
    }
}

<< Funciones de colores Directivas >>