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.