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
.btn 1 { background-color : blue ; font-size : 2em ; color : white ; } .btn 2 { 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.
Contact Us