What is the difference between CSS @import and SASS/SCSS @import?

@import in CSS: CSS has an import option that lets you split your CSS into smaller, more maintainable portions.

Whereas,

@import in SASS/SCSS: Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

For Example:

In _reset.scss

// _reset.scss

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

In base.scss

// base.scss

@import 'reset';

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

References: SASS Guide


css @import happens at runtime, Sass @import at build time.

Tags:

Css

Sass