Pasar al contenido principal

ūüĒ• Hoy comenzamos la especialidad en programaci√≥n backend con PHP con Yesi Days ¬°La primera clase es en vivo y gratis! ūüėć Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
José Luján
Luis Avilés
√Ālvaro Felipe
√Ālvaro Felipe
√Ālvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
√Ālvaro Felipe
Alexys Lozada, √Ālvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
√Ālvaro Felipe
José Luján
√Ālvaro Felipe
√Ālvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
√Ālvaro Felipe
José Luján
Jonathan MirCha
√Ālvaro Felipe
√Ālvaro Felipe
Beto Quiroga, Alexys Lozada
√Ālvaro Felipe
Juan Villalvazo
Luis Avilés
√Ālvaro Felipe
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Mejora tu responsive web design con variables CSS

Las variables CSS pueden ofrecerte mejores resultados que las variables Sass en Responsive Web Design.

Mejora tu responsive web design con variables CSS

Las variables CSS son incre√≠bles y su mejor caracter√≠stica es que est√°n vivas en el navegador, lo que permite manipularlas con JavaScript o utilizarlas para hacer un mejor Responsive Web Design (como te ense√Īar√© en este art√≠culo).

Variables CSS en el navegador

Supongamos que nuestro dise√Īo tiene un .main-header fijo en la parte superior del viewport y una altura diferente en m√≥vil y desktop. Con el CSS de toda la vida lo escribimos as√≠:

.main-header {
  height : 3rem;
}

@media screen and (min-width: 64em) {
  .main-header {
    height : 4rem;
  }
}

Puesto que este elemento es fijo, debemos empujar el body para que no haya elementos que queden tapados por el.

.main-header {
  height : 3rem;
}

body {
  margin-top : 3rem
}

@media screen and (min-width: 64em) {
  .main-header {
    height : 4rem;
  }
  body {
    margin-top : 4rem
  }
}

En este punto la cosa se empieza a complicar porque debemos cambiar valores en dos lugares distintos, y con que el proyecto crezca y otros elementos dependan de este valor, mantener el c√≥digo ser√° un caos (cl√°sico de CSS ūüėĄ). Ser√≠a mejor guardar esa altura en una variable. Seguro piensas en Sass:

$header-height: 3rem;

.main-header {
  height : $header-height;
}

body {
  margin-top : $header-height;
}

@media screen and (min-width: 64em) {
  $header-height : 4rem;
}

Pero hay malas noticias: el código anterior no funciona. Las variables Sass nunca se compilan (solo se compilan sus valores cuando son utilizados en alguna declaración). Así que la forma correcta de hacerlo con Sass es la siguiente:

$header-height : 3rem;

.main-header {
  height : $header-height;
}

body {
  margin-top : $header-height;
}

@media screen and (min-width: 64em) {
  $header-height : 4rem;
  .main-header {
    height : $header-height;
  }
  body {
    margin-top : $header-height;
  }
}

Es decir, adem√°s de redeclarar la variable $header-height hay que volver a escribir las declaraciones para main-header y body ūüí©

Variables CSS al rescate

Puesto que las variables CSS están vivas en el navegador, pueden actualizarse en tiempo real y el navegador actualizará los valores automáticamente. Nuestro ejemplo previo quedará así:

:root {
  --header-height : 3rem;
}

.main-header {
  height : var(--header-height);
}

body {
  margin-top : var(--header-height)
}

@media screen and (min-width: 64em) {
  :root {
    --header-height : 4rem;
  }
}

Hermoso ūüėć. Podemos reducir el c√≥digo un poco m√°s (y hacerlo m√°s entendible) usando Sass:

:root {
  --header-height : 3rem;
  @media screen and (min-width: 64em) {
    --header-height : 4rem;
  }
}

.main-header {
  height   : var(--header-height);
}

body {
  margin-top : var(--header-height)
}

Podemos usar el mismo principio para cualquier valor que cambie en una media query, ahorrándonos mucho tiempo y esfuerzo. Además de hacer el código más legible y mantenible (nuevamente, el problema clásico de CSS). Por ejemplo, podrías crear tu propio sistema de tipografía fácilmente:

:root {
  --h1-font-size    : 2rem;
  --h2-font-size    : 1.5rem;
  --body-font-size  : 1rem;
  --small-font-size : .8rem;
  
  @media screen and (min-width: 64em) {
    --h1-font-size    : 2.5rem;
    --h2-font-size    : 1.75rem;
    --body-font-size  : 1.2rem;
    --small-font-size : 1rem;
  }
}

h1 {
  font-size : var(--h1-font-size);
}

h2 {
  font-size : var(--h2-font-size);
}

body {
  font-size : var(--body-font-size);
}

.small {
  font-size : var(--small-font-size);
}

O tu propio grid:

:root {
  --grid-columns : repeat(2,1fr);
  --grid-gap     : 1rem;
  
  @media screen and (min-width: 40em) {
    --grid-columns : repeat(3,1fr);
    --grid-gap     : 1.5rem;
  }
  
  @media screen and (min-width: 64em) {
     --grid-columns : repeat(4,1fr);
     --grid-gap     : 2rem;
  }
}

.grid {
  display               : grid;
  grid-template-columns : var(--grid-columns);
  grid-gap              : var(--grid-gap);
}

Recuerda que en EDteam tenemos un curso gratuito de variables CSS que te ense√Īa este y m√°s trucos. ¬ŅYa usas variables CSS en tus proyectos? Y si a√ļn no, ¬Ņqu√© est√°s esperando?

 

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal