La regla @import es una regla CSS que permite cargar un archivo .css externo, leer sus líneas de código e incorporarlo al archivo actual. Estas reglas CSS se suelen indicar en las primeras líneas del archivo.
La forma de usar la regla @import es la siguiente:
| Tipo de importación | Descripción |
|---|---|
@import url |
importamos una hoja de estilos CSS externa |
@import url media-query |
Importamos una hoja de estilos CSS sólo si coincide con el media query indicado |
@import url supports(condición) |
Importamos una hoja de estilos CSS sólo si el navegador soporta la condición. |
@import url layer(nombre) |
Importamos una hoja de estilos CSS y la colocamos en la capa nombre. |
@import url layer() |
Importamos una hoja de estilos CSS y la colocamos en la capa anónima. |
Un detalle importante es que hay que tener en cuenta que la regla @import se evalua en el navegador a la hora de cargar la página, por lo que cada regla @import equivalente a una petición al servidor de un archivo .css.
Esto, tradicionalmente, se suponía un problema, ya que en efectos de rendimiento podría ser mucho mejor incluir todo el código CSS en un solo archivo para reducir el número de peticiones. Sin embargo, actualmente, en páginas que funcionen bajo el protocolo HTTP/2 o superior, podría no ser tan relevante. Preprocesadores como Sass (o similares) tienen mecanismos para realizar imports anticipados y generar un sólo archivo con todo el código CSS para que el navegador realice menos peticiones.
Formato de @import
En principio, existen dos formas de cargar archivos externos mediante la regla @import, utilizando la función url() o indicando simplemente un string con el archivo o dirección URL.
Como se puede ver a continuación, se puede utilizar tantos los nombres de los archivos, como rutas relativas o absolutas:
@import url("menu.css"); /* Archivo en la misma ruta */
@import url("menu/sidebar.css"); /* Ruta relativa, dentro de menu/ */
@import "https://sitioweb/index.css"; /* Ruta absoluta, URL completa */
Import con media queries
Observemos en el siguiente caso que podemos indicar una media query, para que ese archivo .css se importe sólo en el caso que se cumpla:
