Mixin de Sass para cambiar medidas en diseño responsive

Trabajando en mi último proyecto necesitaba cambiar la medida de algunos elementos al 60 % para adaptarlos a los navegadores móviles.

Al principio intenté hacerlo con las unidades «rem» de CSS, pero no parecía funcionar como esperaba en el navegador de Android :S (funciona muy bien en el último iOS 6, Firefox móvil, y Chrome y Firefox de escritorio. Dejé de probar cuando falló en el navegador de Android).

La alternativa era hacerlo con unidades «pixel» en CSS puro, pero es un suplicio. Hay que calcular todas las medidas «a mano» y volver a declarar los elementos en las media queries. Lo peor es si necesitas cambiar el porcentaje después de terminar… porque hay que recalcular todas las medidas y eso hace imposible (bueno, posible pero largo) probar y corregir…

Así que me pasé a Sass y creé un mixin que genera las media queries automáticamente a partir del tamaño de cada elemento:

 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}

Para usarlo en mis elementos:

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

Fíjate en que pongo la medida del elemento entre paréntesis y las propiedades, seguidas de la variable $px, entre llaves.

Este es el resultado al compilar el archivo scss a css:

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

El problema es que cada vez que usas el mixin se crea una entrada de media query nueva en tu 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; } }

No encontré la manera de resolver este problema, pero funciona bien en todos los navegadores (no noté ningún problema de rendimiento, pero prefiero un código limpio, y si lo usas mucho también aumentará el peso de tu archivo css. Si sabes cómo resolverlo, no dudes en decírmelo 🙂 ).

Ahora puedo cambiar fácilmente las medidas de todos mis elementos para móviles o tablets a la vez cambiando la variable $responsive_resize.