Menu
The original CSS have the @import keyword, which helps us with including an external CSS file.
So, what is the difference between this @import and the one from SASS/SCSS?
643
We can easily import CSS files in the sass file. But it is forbidden not to include the .css extension in the import statement. But the saas team discourages the use of the @import Rule. Sass team encourages the use of @use rule instead which is available in dart sass.
What’s more, any mixins, functions, or variables that were defined before the @import (including from other @import) are available in the imported stylesheet.” So position matters while importing Sass. In sass writing the file, an extension isn’t necessary. @import “design” will automatically load design.css/design.scss/design.sass
SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. It makes use of semicolons and brackets like CSS (Cascaded Style Sheets).
You can also import CSS files. The @import directive imports the file and any variables or mixins defined in the imported file can then be used in the main file. Let's look at an example: Let's assume we have a reset file called "reset.scss", that looks like this:
@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
@importbut 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
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
