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

    
    

    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

    
    

    input.scss

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @import 'paragraph';

    chevron_right

    
    

    Compiled file of input.scss: output.css

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


My Personal Notes arrow_drop_up

I am doing BTech at Dhirubhai Ambani Institute of Information and Communication Technology

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.