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 */
}