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

   filter_none

   edit
   close

   play_arrow

   link
   brightness_4
   code

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

   chevron_right

   filter_none

   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

   filter_none

   edit
   close

   play_arrow

   link
   brightness_4
   code

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

   chevron_right

   filter_none

   input.scss

   filter_none

   edit
   close

   play_arrow

   link
   brightness_4
   code

   @import 'paragraph';

   chevron_right

   filter_none

   Compiled file of input.scss: output.css

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

---

---