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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.