Import | Sass
Sass Import
Sass Import
Import in Saas
Sass allows to import the contents of another Sass file. This is for easily code maintainance. CSS developers are aware of @import directive which imports another CSS file. But that CSS is file is loaded seperately in the web browser with new HTTP request for each @import file. @import in Sass do this differntly. Sass @import allows to append code within calling Sass file, resulting single .css file. This allows save in time of HTTP requests and in result improves load time of the web page.
body{
margin: 0;
padding: 0;
}
@import 'base';
body{
background-color:black;
color:white;
}
The above code inserts at the point where where base.scss was imported, resulting the following output:
body{
margin: 0;
padding: 0;
}
body{
background-color:black;
color:white;
}
@importdoes not require file extension of the file being imported. With@importdirective, outputs of the calling file and@importfiles are merged to a single file.
@import is not similar to inheritance in OOP. Sass or SCSS appends the file below the @import file.
- @import doesn't require to specify file extension