@import, use
Etiqueta @useEtiqueta @import

<< Primeros pasos en Sass Nesting >>

Etiqueta @use

Desde la versión 1.80 de Dart Sass, la regla @import está deprecated, por tanto debemos usar en su defecto @use

La regla @use nos permite cargar mixin, funciones y variables de otras hojas de estilos SCSS, y combinar multiples css juntos. Cuando cargamos una hoja de estilo con @use estos son llamados "módulos".

@use 'scss/contenido';
@use 'scss/menu';

Nosotros podemos acceder a las variables, funciones y mixin que hemos creado en otros módulos mediante: namespace.variable o namespace.funcion(), o @include namespace.mixin()

Los miembros (variables, funciones y mixin) que cargamos con @use son sólo visibles en la hoja de estilos que los cargamos, si queremos que esas hojas sean cargadas en otros archivos debemos volver a usar el @use, no se cargan, tendríamos que usar @forward.

@use "scss/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

Con el ejemplo anterior, estamos usando el mixin definido en el archivo _corners.scss usando el nombre del file, si queremos darle un alias, deberíamos usar la palabra reservada as.

@use "scss/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + corners.$radius;
}

Podemos también cargar el módulo entero sin usar el namespace usando @use as *. Esto es recomendable en archivos scss que sólo has creado tú, sino corres el riesgo de estar creando conflictos con nuevas variables/mixin/etc.

@use "scss/corners" as *;

.button {
  @include rounded;
  padding: 5px + $radius;
}

Etiqueta @import

La etiqueta @import en CSS es una etiqueta que se desaconseja ya que se va descargando poco a poco los archivos CSS importados, sin embargo, cuando usamos @import en Sass, esta regla es bastante diferente, ya que podemos importar archivos con extensión .scss o .sass, La importación en Sass se lleva a cabo durante la compilación en lugar de en el lado del cliente. Además, cuando usamos @import en Sass no tenemos que incluir la extensión del archivo (es opcional).

Actualmente, con HTTP/2 realizar muchas peticiones al servidor para pedirle descargar varios archivos CSS no impacta tanto en el rendimiento, sin embargo, sigue siendo buena práctica intentar reducir el número de peticiones, PERO si usamos Vite esas peticiones se reducen porque lo primero que hace es empaquetar todo y por tanto sólo sería una generar una única petición.

// Importa los estilos encontrados en buttons.scss
// Cuando el compilador compila index.scss

@import 'buttons';

Por tanto, es durante el proceso de compilación index.css pasa a tener los estilos de los archivos: estilos.scss y buttons.scss. Para que el archivo resultante funcione en todos los sistemas operativos, Sass importa los archivos utilizando la URL no el file path, esto significa que debemos utilizar barras y no las barras invertidas aun estando utilizando el Windows. 

Si queremos importar varios archivos, podemos hacerlo separando cara archivo por comas, es decir:

@import 'buttons', 'colors';

En versiones previas, al incluir la hoja de estilos buttons, cuando compilábamos nos generaba el archivo estilos.css, pero también nos generaba el archivo CSS de buttons. Para que no nos creara el archivo de buttons.css debíamos nombrar el archivo buttons.scss con el subrayado delante o lo que se llama partials, es decir:

  • Si quería que me creara el archivo buttons.css, lo creábamos: buttons.scss
  • Si no quería que me crease el archivo buttons.css, lo creaba: _buttons.scss (es lo que se conoce como partials)

Y a la hora de especificar que se va a importar un archivo “parcial”, es decir, el _buttons.scss, se realizaba de la misma forma:

@import 'buttons';

No ponemos el subrayado en este caso dentro del valor del nombre del archivo a importar. A día de hoy podemos crear los partials igual, pero tanto npm como Vite cuando compilamos el archivo de sass nos genera un único fichero .css con todo compilado e importado.

<< Primeros pasos en Sass Nesting >>