Saas @mixin para cambiar medidas para un diseño responsivo

En mi último proyecto necesitaba cambiar las medidas de ciertos elementos a el 60% de su tamaño original para adaptarlos a los navegadores móviles.
Lo primero que intenté fue utilizar las unidades ‘rem’ de CSS pero no me funcionaban bien en el navegador de Android :S (si que funcionaban por el contrario en ios6, firefox mobile, y las versiones de escritorio de firefox y chrome. Dejé de hacer tests cuando falló en android pero imagino que no habrá problemas en Safari y en IE… pues no se 😛 )
La alternativa era hacerlo con ‘píxeles’, pero no era muy conveniente. Tenía que calcular “a mano” todas las medidas y declarar de nuevo los elementos en las ‘media queries’. La peor parte es que si quiero cambiar el porcentaje de las medidas para móvil ya que tendría que re-calcular todo, haciendo imposible (bueno, no imposible, pero si muy largo) hacer test de prueba / error.
Entonces decidí pasarme a sass y crear un ‘mixin’ para generar las ‘media queries’ automáticamente, basándose en el tamaño de cada elemento:
$responsive_resize: 0.6;
$px:1px;
@mixin res($rpx) {
$px: $rpx;
@content;
@media screen and (max-width: 320px) {
$px: $rpx*$responsive_resize;
@content;
}
}
view rawgistfile1.scss hosted with ❤ by GitHub
Para usarlo en mis elementos:
.myclass {
@include res(400px) { width: $px; }
}
view rawgistfile2.scss hosted with ❤ by GitHub
Fíjate que he puesto la medida que quiero darle al elemento entre los paréntesis y las propiedades, seguidas de la variable $px, dentro de las llaves.
El resultado cuando compilas el fichero scss en css es el siguiente:
.myclass {
width: 400px; }
@media screen and (max-width: 495px) {
.myclass {
width: 240px; } }
view rawgistfile3.css hosted with ❤ by GitHub
El problema viene cuando usas más de una vez este ‘mixin’ en el mismo elemento, ya uqe cada vez que lo usas crea un nuevo ‘media query’ en tu css:
.myclass {
@include res(400px) { width: $px; }
@include res(200px) { height: $px; }
}
view rawgistfile4.scss hosted with ❤ by GitHub

.myclass {
width: 400px;
height: 200px; }
@media screen and (max-width: 495px) {
.myclass {
width: 240px; } }
@media screen and (max-width: 495px) {
.myclass {
height: 120px; } }
view rawgistfile5.css hosted with ❤ by GitHub
No he encontrado una manera de resolver esto. Funcionar funciona bien en todos los navegadores (No he apreciado problemas graves de ‘performance’ pero seguro que bueno no es. Además siempre es preferible un código más limpio y hay que tener en cuenta que si lo usas mucho también v aa crecer el peso de tu archivo css. Por supuesto, si encuentras una forma de solucionar esto dímelo 🙂 )
Ahora puedo cambiar la medida de todos mis elementos para los terminales móviles al mismo tiempo, simplemente cambiando la variable $responsive_resize

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.