SASS | @import

Using @import we can import SCSS or CSS files in our main file, So basically we can combine multiple files together.

Syntax:

 @import 'Relative path to the file1', 'Relative path to the file2', ...; 

We do not have to include .scss or .css extension after file name in the path. You can import as many files as you want. To understand relative path go through this article.

1. Importing SCSS file into SCSS file:
   Here we put _ before the name of the .scss file which tells the SASS compiler that the file should not compile on its own.

   Advantage:
   The main advantage of doing this is, We can combine multiple files using @import and then compile the main file. So, as a result, we will have only one CSS file and therefore browser will not have to make more than one HTTP request to load different CSS files.
   _aside_list.scss

   #aside_list {
   
       list-style-type: none;
   
       li {
           color: grey;
           text-align: center;
           width: 40px;
           height: 80px;
           background-color: lightpink;
   
           // Here & is parent selector
           &:hover {
               background-color: pink;
           }
       }
   }

   You can leave _ and .scss extension while importing the .scss file.

   input.scss

   @import "aside_list";
   

   Compiled file of input.scss: output.css

   #aside_list {
     list-style-type: none;
   }
   
   #aside_list li {
     color: grey;
     text-align: center;
     width: 40px;
     height: 80px;
     background-color: lightpink;
   }
   
   #aside_list li:hover {
     background-color: pink;
   }
   

2. Importing CSS file into SCSS file:
   Importing CSS file is similar to importing .scss file but you must not include .css as the extension of CSS file. The main reason for this is: CSS also have @import rule which has .css extension syntax.

   paragraph.css

   p {
     color: red;
     font-size: 20px;
   }

   input.scss

   @import 'paragraph';

   Compiled file of input.scss: output.css

   p {
     color: red;
     font-size: 20px;
   }
   

Nesting Import

We can also nest import inside a specific component in SASS. This feature has an advantage , i.e , it can import the stylesheet for a specific CSS chunk. Given below is an example which shows nesting import :

 //style.sass
ul
color: blue;
background-color: skyblue;
li
color: yellow;
background-color: blue; 

 //style4.sass
nav
@import style
ul
background-color: pink; 

In the above example, we can see that that we imported the “style.sass” file into the “style4.sass” file. When the above file is compiled to native CSS , then :

CSS

nav ul {
color: blue;
background-color: skyblue;
}
nav li {
color: yellow;
background-color: blue;
}
ul {
background-color: pink;
}

NOTE:

The @import has some serious drawbacks:

1. The @import makes everything global including the variables, mixins and so on, thus, makes it difficult for people to tell whether anything is defined or not.
2. The @import makes it difficult for libraries in naming of variables because a variable with the same name may be present in the other files imported.
3. Importing a lot of stylesheets increases the compilation time and sometimes we get lags and bloated output result.
4. There is no way of defining private data members and thus, it causes a serious security issue.

All of the above mentioned problem can be easily solved by using the @use directive which addresses all of the above problem.