Control de tamaños de fuentes con Sass

Trabajando en un proyecto nuevo con mi framework de css me di cuenta que no había creado una manera de mantener el tamaño de las fuentes consistentes. He descubierto que me gusta mantener las fuentes consistentes, así un tamaño pequeño es siempre el mismo tipo de “pequeño” y no es un poco más pequeño que el otro que es pequeño (Los que tengan que lidiar con diseñadores día a día, me entenderán).

Este problema suele ocurrir también con los colores: es muy fácil dejarse llevar mientras hacemos un diseño y agregar muchas tonalidades de grises, por ejemplo. Lo mismo ocurre con los tamaños de fuentes; podemos ir creando diseños en editor gráfico favorito y sin darnos cuenta tener muchas tonalidades de grises. Cuando pasamos a código y añadimos todos esos colores a variables, nos damos cuenta que hace falta simplificar y dar mas consistencia a todos esos colores, o tamaños de fuentes. Necesitaba algo que mantuviera esa consistencia en los tamaños de fuentes: Que sólo hubieran fuentes del tamaño establecido.

Pero no podía crear unas simples clases con el valor de las fuentes, pues tendría que hacer uso excesivo del %extend y quiero tener la posibilidad de poder aplicar esos tamaños en diferentes mediaqueries – Recordad que no se puede hacer %extend dentro de un mediaquery -.

Para ir al grano, necesitaba las siguientes condiciones:

  • Poder listar las variables de tamaños ($mini: .8rem, $x-mini: .6rem…) ya que las necesitaría para crear los selectores y la función.
  • Crear selectores de clase basado en esa variable para manetener el tamaño en un elemento X por medio de una clase : .mini { font-size: $mini}.
  • Función para definir tamaños de fuentes en selectores: p { font-size: font($mini); }

La lista de variables en Sass no es complicada, pero no haremos una lista, técnicamente, sino un MAPA para listar todas las variables:


$size-vars: (
  "x-small"  :    .8,
  "small"    :    .9,
  "big"      :    1.5,
  "huge"     :    2
);


Podemos agregar más elementos a la lista o cambiar los nombres según queramos, pero lo importante es que puedo jugar con una directiva @each para crear mis clases:


 @each $size, $font-size in $size-vars {
  .font-#{$size} {
    font-size: $font-size * 1rem;
  }
}

// Compila en:

.font-x-small {
  font-size: 0.8rem;
}

.font-small {
  font-size: 0.9rem;
}

.font-big {
  font-size: 1.5rem;
}

.font-huge {
  font-size: 2rem;
}

Y aquí tengo las clases que necesito para añadir a elementos:


<span class="font-x-small">Texto Pequeñito</span>
<span class="font-small">Texto Pequeño</span>
<span class="font-big">Texto Grande</span>
<span class="font-huge">Texto Gigante</span>

Pero ahora necesito poder incluir el tamaño de fuente en mis selectores de CSS, se puede decir que un extend arreglaría el problema, pero no. Con un extend no puedo cambiar el tamaño de fuente dentro de un mediaquery, como mencioné antes.

Así que vamos a hacer una función:


@function f($font-size) {
  @return map-get($size-vars, $font-size) * 1rem;
}

Y listo. Con esa función puedo incluir el tamaño de fuente prestablecido en el selector que quiera de la siguiente manera:


.selector {
	font-size: f(x-small);
}

// Compila:
.selector {
	font-size: 0.8rem;
}

Porsupuesto que ahora tenemos el problema de la inconsistencia con el nombre del “tamaño”, mientras que en la función debo usar el nombre del índice, el nombre del selector varía pudiendo causar confusión si nos acostumbramos a uno u a otro. Yo recomendaría utilizar nombres consistentes:



//Nombre de indices en el mapa:
$size-vars: (
  "font-xsmall"   :    .8,
  "font-small"    :    .9,
  "font-big"      :    1.5,
  "font-huge"     :    2
);


//Los selectores de clase:
 @each $size, $font-size in $size-vars {
  .#{$size} {
    font-size: $font-size * 1rem;
  }
}

//La Función:
@function f($font-size) {
  @return map-get($size-vars, $font-size) * 1rem;
}

De esta manera, tenemos el mismo nombre para la función y para los selectores de clase: los que asignamos en el mapa. ¿Qué os parece? Tenéis maneras más efectivas de controlar esas variables que tanto varían en un proyecto?

Daniel Martínez

Opiniones y preguntas:

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