¿Cuál es el uso de la función SASS @import?

Escribir código usando lenguaje CSS nativo a veces es bastante confuso, largo y complejo. Para reducir la complejidad de escribir código CSS, usamos preprocesadores CSS. Uno de los preprocesadores CSS más utilizados es SASS. En este artículo, aprenderemos sobre el uso de la función @import en SASS.

La función SASS @import nos ayuda a importar varias hojas de estilo SASS o CSS juntas para que puedan usarse juntas. Importar un archivo SASS usando la regla @import permite el acceso a mixins, variables y funciones al otro archivo en el que se importa el otro archivo.

Sintaxis:

@import path_of_file

Podemos importar múltiples archivos SASS en un solo archivo SASS simplemente usando comas. Esto facilita mucho el código en los casos en los que tenemos que importar numerosos archivos.

Sintaxis:

@import file1, file2, file3

Ejemplo: a continuación se muestra un ejemplo de código en el que creamos dos archivos SASS separados con los nombres style1.sass y style2.sass y les agregamos el código SASS y luego importamos ambos archivos SASS al archivo final style.sass .

Nombre de archivo: style1.sass

.btn1
    background-color: blue
    font-size: 2em
    color: white

Nombre de archivo: style2.sass

.btn2
    color: blue
    background-color: aqua
    font-size: 2em

Nombre de archivo: estilo.sass

@import style4, style3

Salida: si se compila el código anterior, el archivo CSS final, es decir, el archivo «style.css», será el siguiente:

.btn1 {
  background-color: blue;
  font-size: 2em;
  color: white;
}
  
.btn2 {
  color: blue;
  background-color: aqua;
  font-size: 2em;
}

Nota: aunque la función @import es una función SASS muy útil, sin embargo, tiene algunos inconvenientes importantes, como se indica a continuación:

• @import hace que todas las variables, mixins y otras características estén disponibles globalmente, lo que dificulta el mantenimiento de las bibliotecas, ya que a menudo provoca una colisión de nombres.
• También tiene algunos riesgos de seguridad, ya que hace que todo esté disponible globalmente para que cada usuario lo edite y cambie.
• La regla @extend en SASS también es global, lo que dificulta que el programador determine qué estilo se extenderá.

Debido a todas estas dificultades , el equipo de SASS desaconseja el uso de la función @import y es posible que se elimine del lenguaje en los próximos años. En lugar de la función @import, tenemos otra función @use en la biblioteca SASS que aborda el problema mencionado anteriormente y lo resuelve.