Buenas de nuevo a tod@s.
Continuamos con la serie de posts que iniciamos en agosto sobre algunos mixins de SASS interesantes que nos facilitarán la generación del CSS de nuestros proyectos.
En esta segunda entrega, el mixin que os traemos consiste en convertir los tamaños de fuente "font-size" que escribimos con unidades "px" (pixels) a unidades "rem" (unidad relativa), que es la más recomendable para usar en determinados casos.
El código del mixins es el siguiente:
// =============================================================================
// Font Size REM
// =============================================================================
@mixin font-size($size) {
@if unitless($size) {
$size: $size * 1px;
}
font-size: $size;
font-size: ($size / $base-font-size) * 1rem;
}
Su uso es muy sencillo, nos vale con hacer el siguiente include donde queramos:
.example {
@include font-size(16px);
}
Generándose el siguiente css:
.example {
font-size: 16px;
font-size: 1rem;
}
Esperamos que os sirva de ayuda y os facilite el trabajo.
¡Nos vemos en la siguiente entrega!