¿Cuál es la diferencia entre CSS @import y SASS / SCSS @import?

Solución:

@importar en CSS: CSS tiene una opción de importación que le permite dividir su CSS en porciones más pequeñas y fáciles de mantener.

Mientras que,

@importar en SASS / SCSS: Sass se basa en el CSS actual @import pero en lugar de requerir una solicitud HTTP, Sass tomará el archivo que desea importar y lo combinará con el archivo al que está importando para que pueda entregar un solo archivo CSS al navegador web.

Por ejemplo:

En _reset.scss

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

En base.scss

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Referencias: Guía SASS

css @import ocurre en tiempo de ejecución, Sass @import en tiempo de compilación.

Recomiendo utilizar las importaciones de Sass siempre que sea posible.

Supongamos que tenemos el siguiente código escrito en CSS nativo:

@import "style1.css";
@import "style2.css";
@import "style3.css";

Como resultado, obtiene un archivo, que está descargando otros archivos. Estas solicitudes se envían por separado a su servidor y obtiene 3 archivos como respuesta. Solo mire la consola del desarrollador para notar este problema.

En la forma de Sass, los archivos se concatenan en un archivo (por el flujo de trabajo de la interfaz que usa) y es solo una solicitud a su servidor.

---

---

Utiliza Nuestro Buscador