Por qué @use es mejor que @import

Acceder a variables, funciones, mixins y combinar varias hojas de estilos en una sola, son varias de las funciones que cumple la regla @import en Sass. Pero, ¿y si te dijera que hay una mejor alternativa que esta?

Hoy te quiero presentar al que muy seguramente será tu nuevo mejor amigo: @use.

Quizá ahora mismo te estás preguntando: ¿Qué tiene de malo usar @import? Bueno, acompáñame y lo averiguarás.

Acceder a miembros

Uno de los features más valorados de Sass es su posibilidad de crear variables, funciones y mixins (llamados miembros) los cuales nos permiten aumentar las capacidades que nos brinda el CSS plano.

Al usar @import, todos los miembros cargados tienen un alcance global. Esto significa que podemos acceder a ellos desde cualquier hoja de estilos, haciendo muy difícil saber en dónde fueron declarados.

Accedemos a la variable $primary-color a través de header.scss.

Con @use no tenemos este problema, ya que los miembros solo pueden ser visibles en la hoja de estilos en la que son cargados.

La variable $primary-color solo se puede acceder en donde se está cargando variables.scss, de lo contrario, nos dará un error.

Nombrar miembros

Debido a que todos los miembros tienen un alcance global usando @import, se deben usar nombres muy elaborados para evitar conflictos con miembros de otras hojas de estilos o librerías.

El valor de $primary-color es sobreescrito por la variable declarada en header.scss.

Con @use podemos nombrar nuestros miembros de una manera muy simple y no tendremos ningún problema gracias a que podemos referenciar de qué hoja de estilos provienen.

Accedemos a la variable como variables.$primary-color y evitamos conflictos de sobreescritura.

Cargar estilos de CSS

Si bien, @import nos permite combinar las reglas CSS de diferentes hojas de estilos en una sola; estas reglas son agregadas cada vez que se importa una hoja de estilos. Si importamos la misma hoja repetidas veces, su CSS será agregado la misma cantidad de veces que se @importa. Lo cual incrementa el tiempo de compilación, además de generar un archivo .css con muchas reglas repetidas.

Importamos header.scss 3 veces y se repiten las reglas CSS al momento de ser compilado.

Cada hoja de estilos cargada con @use es denominada un módulo (module). Estos módulos no pueden ser cargados más de una vez, previniendo que se cargue varias veces el mismo módulo.

Intentamos cargar el módulo header.scss 2 veces, lo cual nos genera un error al compilar.

Miembros privados

Hay ocasiones en las cuales puede que no quieras que todos los miembros que declaras sean accesibles fuera de la hoja de estilos.

Hasta el momento, cada vez que se usaba @import teníamos acceso a todos los miembros declarados, pero, como has visto a lo largo de este tutorial, @use está aquí para alegrarnos el día.

Sass nos permite definir miembros privados simplemente agregando un guión (-) o un guión bajo (_) antes del nombre de cada uno de ellos. De esta manera, solo serán visibles en la hoja de estilos donde son declarados.

La variable $_private-color solo se puede acceder en header.scss.

Conclusión

Como pudiste ver en este pequeño tutorial, @use es por estas (y algunas otras) razones mucho mejor que nuestro viejo amigo @import. ¿Aún tienes dudas? Te invito a leer la documentación acerca de @import, en donde incluso los mismos desarrolladores han dicho que removerán esta regla del lenguaje en futuras versiones.

Si te gustó este pequeño abrebocas del gran poder que tiene @use, te dejo el enlace a la documentación de esta grandiosa regla. También, te comparto la información de otro chico del barrio llamado @forward; gran compañero de @use y que seguro te caerá muy bien.

¿Habías usado esta nueva regla antes? Cuéntanos en los comentarios.