What is the use of SASS @import function ?

Writing code using native CSS language is sometimes quite confusing, lengthy, and complex. To reduce the complexity of writing CSS code, we use CSS preprocessors. One of the most popularly used CSS preprocessors is SASS. In this article, we will learn about the use of the @import function in SASS.

The SASS @import function helps us to import multiple SASS or CSS stylesheets together such that they can be used together. Importing a SASS file using the @import rule allows access to mixins, variables, and functions to the other file in which the other file is imported.

Syntax:

@import path_of_file

We can import multiple SASS files into a single SASS file just using commas. This makes the code much easier in the cases where we have to import numerous files.

Syntax:

@import file1, file2, file3

Example: Given below is a code example where we have created two separate SASS files with names style1.sass and style2.sass and added the SASS code to them and then, we have imported both the SASS files to the final style.sass file.

Filename: style1.sass

.btn1
    background-color: blue
    font-size: 2em
    color: white

Filename: style2.sass

.btn2
    color: blue
    background-color: aqua
    font-size: 2em

Filename: style.sass

@import style4, style3

Output: If the above code is compiled, then the final CSS file i.e “style.css” file will be as follows:

CSS

.btn1 {
  background-color: blue;
  font-size: 2em;
  color: white;
}

.btn2 {
  color: blue;
  background-color: aqua;
  font-size: 2em;
}

Note: Though the @import function is a very useful SASS feature., however, it has some major drawbacks as given below:

• @import makes all the variables, mixins, and other features globally available, which makes it difficult for the libraries to maintain as it often causes some naming collision.
• It has also some security risks as it makes everything globally available for every user to edit and change.
• The @extend rule in SASS is also global, which makes it difficult for the programmer to determine which style to be extended.

Because of all these difficulties, the SASS team discourages the use of @import function and it may be removed from the language in the coming years. Instead of @import function, we have another @use function in the SASS library that addresses the above-mentioned problem and solves them.