What is the purpose of the SASS @import function?

SASS is a CSS preprocessor that keeps CSS code DRY by not allowing repetition within the code. SASS has various directives, one of which is the @import directive.

The @import directive is used to import code from one “.scss” or “.sass” file into another file and execute it during the compilation process. We can use the “@import” directive to import variables, functions, mixins, and more from one file into another.

Syntax

Users can use the “@import” directive in SASS to import files using the following syntax.

@import 'test' 

In the above syntax, we have imported the “test.scss” or “test.sass” file. Here, we do not need to specify the file extension when importing its code because the compiler automatically detects it.

If the user wants to import multiple CSS files in a single file, the following syntax should be used.

@import 'file1', 'file2', 'file3', 'file4', ... 

Now, let’s understand how to import files using the @import directive through an example.

Example 1

In the following example, we add some variables to the “fonts.scss” file. Afterwards, we use the “@import” directive to import the contents of the “fonts.scss” file into the “styles.scss” file.

In the “styles.scss” file, we used variables from the “font.scss” file. We then compiled the code from the “styles.scss” file. You can observe the updated code in the “style.css” file in the output image.

File name – Style.scss

@import "fonts"; 
<span class="katex math inline">height: 5rem;</span> border: 2px, solid, blue; 
div { 
Height：<span class="katex math inline">height; 
Border：</span> border; 
Border-radius：1rem; 
} 
h1 { 
Font-size：<span class="katex math inline">heading-font-size; 
font-weight：</span> heading-font-weight; 
Color：<span class="katex math inline">heading-font-color; 
font-family：</span> heading-font-family; 
} 
p { 
​ font-size：$ paragraph-font-size; 
font-weight：200; 
} 

File name – Fonts.scss

$ normal-font-size：1rem; 
$ paragraph-font-size: 1.2rem; 
$ heading-font-size: 1.5rem; 
$ heading-font-weight: 700; 
$heading-font-color: #000; 
$heading-font-family: "Roboto", sans-serif; 

Output

@import "fonts", "colors"; div { Color：<span class="katex math inline">text-color; Background-color：</span> background-color; } ul { li { Color：<span class="katex math inline">text-color;          background-color:</span> background-color;         font-size:<span class="katex math inline">normal-font-size; } } h1 { Color：</span> primary-color; Font-size：<span class="katex math inline">heading-font-size; font-weight：</span> heading-font-weight; ​ font-family：$ heading-font-family; }

File name – Colors.scss

$ text-color: #000; 
$background-color: #fff; 
$primary-color: #000; 
$secondary-color: #fff; 
$tertiary-color: #000; 

File name – Fonts.scss

$ normal-font-size: 1rem; 
$ paragraph-font-size: 1.2rem; 
$ heading-font-size: 1.5rem; 
$ heading-font-weight: 700; 
$ heading-font-family: "Roboto", sans-serif; 

Output

Benefits of Using the @import Directive

Following are some of the benefits of using the “@import” directive.

• We can import the CSS code of one file into another file.

• We can create a separate CSS file for each component of the code and import it when required.

Disadvantages of Using the @import Directive

The following are some disadvantages of using the “@import” directive.

• It makes all the contents of a CSS file, such as variables, functions, mixins, etc., globally accessible. Therefore, it is difficult for developers to know where a specific variable is defined.

• Since all the contents of each imported file become global, each file should have different variable names to avoid conflicts.

• The SASS compiler compiles every SCSS file, whether imported or not, which increases compilation time and reduces code efficiency.

Partials in SASS

To address the above disadvantages, we can use partials in SASS. We can create a partial SCSS file by adding an underscore to the file name. For example, “_test.scss,” “_colors.scss,” and so on.

Whenever partials are used, the SASS transpiler does not compile the code in the partial file, which improves code efficiency. However, we can import the contents of a partial SCSS file into the main SCSS file.

The following is an example of using partial SCSS files.

Example 3

In the example below, we create a “_colors.scss” partial file and import it into the “style.scss” file. In this example, we use partial files, which makes code compilation more efficient.

However, whether we use partials or not, the code output remains the same.

File name-Style.scss

@import "colors"; 

img { 
width: 100%; 
height: 100%; 
background-color: <span class="katex math inline">background-color; 
} 
p { 
color:</span>text-color; 
} 

File name-Color.scss

$text-color: #000; 
$background-color: #fff; 
$primary-color: #000; 
$secondary-color: #fff; 
$tertiary-color: #000; 

Output

Users have learned to use the “@import” directive to import code from one file into another. It helps us break SCSS code into smaller chunks and avoid duplication. However, using the @import directive also has some drawbacks, which can be addressed using partials.