14

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.

acc-members-import.png

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.

acc-members-use.png

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.

naming-import.png

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.

naming-use.png

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.

loading-import.png

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.

loading-use.png

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.

private-members.png

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.

Escribe tu comentario
+ 2
1
20221Puntos

muchas gracias por tu aporte @sneyderdev pero lo que no termino de entender es porque quisiera importar estilos de esta manera es decir llamar los estilos de variables.scss y a la vez de header.scss dentro de main.scss, no le encuentro sentido, porque lo que normalmente quiero es que las variables estén en global y que de allí lo llame para todas partes