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

Question

The original CSS has the @import keyword, which helps us include an external CSS file.

So, what is the difference between this @import and SASS / SCSS?

Answer 1

@import in CSS: CSS has an import option that allows you to break your CSS into smaller, more maintainable parts.

Pay attention to,

@import in SASS / SCSS: Sass is built on top of the current @import CSS, but instead of requesting an HTTP request, Sass will take the file you want to import and merge it with the file you import so that you can submit one CSS file to the web -browser.

For instance:

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; } 

Links: SASS Guide

Answer 2

I recommend using Sass imports wherever possible.

Suppose we have the following code written in our own CSS:

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

As a result, you get one file that loads other files. These requests are sent separately to your server, and you get 3 files in response. Just look at the developer console to notice this problem.

In Sass files, files are combined into a single file (using the frontend workflow that you use), and this is just one request to your server.

Answer 3

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