Entendiendo @use y @forward en Dart Sass
En este artículo escrito para el blog de Redradix, hablamos de lo que ha supuesto la llegada del Module System de SASS, un cambio necesariamente obligatorio, y sobre por qué quizá haya pasado tan desapercibido, además de sus ventajas y cómo empezar a utilizarlo con @use
y @forward
.
Aquí el enlace al repositorio para cacharrear un poquito con los diferentes tipos de importaciones
Nota al pie
En un post anterior sobre las funciones min
, max
y clamp
, explicábamos que para usar usar estas funciones en Sass teníamos que entrecomillarlas y utilizar unquote()
porque Sass las confundía con las suyas propias, ya que compartían nombres.
.element-c {
width: unquote("min(500px, 98%)");
}
.element-d {
font-size: unquote("max(min(10%, ((1.25vw + 10px) * 0.5), 5vw), 1rem)");
}
Pero si ya has leído el artículo mencionado al principio de esta entrada te podrás imaginar por qué ya no supone un problema y por qué con dart-sass podemos utilizarlas de forma normal.
.element-c {
width: min(500px, 98%);
}
.element-d {
font-size: max(min(10%, ((1.25vw + 10px) * 0.5), 5vw), 1rem);
}
Estas funciones pertenecen al módulo ‘math’, y como por defecto al importar un módulo con @use
sus miembros están encapsulados, ya no hay colisión entre la función min
nativa de CSS y la propia de Sass.
@use 'sass:math';
.element-c {
width: min(500px, 98%); /* nativa CSS */
}
.element-e {
width: math.min(500px, 300px); /* propia de Sass */
}
Si te ha parecido interesante
Tanto si tienes alguna duda o quieres charlar sobre este tema, como si el contenido o nuestros perfiles te parecen interesantes y crees que pdemos hacer algo juntos, no dudes en ponerte en contacto con nosotros a través de twitter o en el email hola@mamutlove.com