Sass: Pasar de “px” a “em” sin heredar tamaños

Si usamos Sass y nos encontramos con la necesidad de pasar valores de “px” a “em” podemos hacer una función muy sencilla que nos solucionará el problema.

Lo normal es que una de las primeras variables que declares en tu Sass sea el tamaño de texto base del sitio. Yo lo llamaré base-font:

$base-font: 16px

La función sería algo así:

@function em($px) {
@return ($px / $base-font) * 1em;
}

Como ves, a la funcion “em” le pasamos sólo un parámetro ($px) que es el número de píxeles que queremos convertir a “em“.

Pongamos un ejemplo sencillo, un div con class=”info” con un texto dentro:

HTML

Esto es un ejemplo de panel de información

SCSS

$base-font: 16px;
@function em($px){
  @return ($px / $base-font) * 1em;
}
*{
  font-family: 'Helvetica', Arial, Verdana;
  color:#444;
}
.info{
  font-size: em(32px);
}

¿Qué pasa si queremos que el strong tenga un tamaño de 16px?

SCSS

.info{
  font-size: em(32px);
  strong{
    font-size: em(16px);
  }
}

En este caso nos valdría de poco la función ya que heredaría el tamaño del padre y al resolverse la función devolvería un valor de 1em. Lo pintaría a un tamaño equivalente a 32px.

Aquí la prueba:

See the Pen KwZwZR by lureka (@lureka) on CodePen.

Solución

En este caso deberíamos utilizar “rem” en vez de “em” ya que con “rem” nos referimos al valor inicial de “font-size” (root).

El código quedaría así:

$base-font: 16px;
@function rem($px){
  @return ($px / $base-font) * 1rem;
}
*{
  font-family: 'Helvetica', Arial, Verdana;
  color:#444;
}
.info{
  font-size: rem(32px);
  strong{
    font-size: rem(16px);
  }
}

See the Pen VYyYEa by lureka (@lureka) on CodePen.

Compatibilidad con navegadores

“rem” no es compatible con < IE8 y Opera Mini http://caniuse.com/#search=rem

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *