What is the use of SASS @import function?

The SASS is a CSS preprocessor that keeps the CSS code dry as it doesn’t allow repetition in the code. There are various directives available in the SASS, one of which is the @import directive.

The ‘@import’ directive is used to import the code of one ‘.scss’ or ‘.sass’ file into another file and execute it during compilation. We can import the variables, functions, mixins, etc., from one file to another using the ‘@import’ directive.

Syntax

Users can follow the syntax below to use the ‘@import’ directive in the SASS to import the file.

@import 'test'

We have imported the ‘test.scss’ or ‘test.sass’ file in the above syntax. Here, we don’t need to specify the file extension while importing its code, as the compiler automatically detects it.

If users want to import the multiple CSS file in a single file, they should use the below syntax.

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

Now, let’s understand to import files using the @import directive via examples.

Example 1

In the example below, we have added some variables in the ‘font.scss’ file. After that, we have used the ‘@import’ directive to import the content of the ‘fonts.scss’ file in the ‘styles.scss’ file.

In the ‘style.scss’ file, we have used the variables of the ‘font.scss’ file. After that, we have compiled the code of the ‘styles.scss’ file and users can observe the updated code of the ‘style.css’ file in the output image.

Filename − Style.scss

@import "fonts";
$height: 5rem;
$border: 2px, solid, blue;
div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}
h1 {
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   color: $heading-font-color;
   font-family: $heading-font-family;
}
p {
   font-size: $paragraph-font-size;
   font-weight: 200;
}

Filename − 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

Example 2

In the example below, we have added the colour-related variables into the ‘color.scss’ file and font-related variables into the ‘fonts.scss’ file. In the ‘style.scss’ file, we have imported the ‘fonts.scss’ and ‘colors.scss’ files together using the ‘@import’ directive.

In the ‘style.scss’ file, we have used the variables of colors and fonts. In the output, users can observe the value of the particular CSS properties for which we have used the variables.

Filename − Style.scss

@import "fonts", "colors";
div {
   color: $text-color;
   background-color: $background-color;
}
ul {
   li {
      color: $text-color;
      background-color: $background-color;
      font-size: $normal-font-size;
   }
}
h1 {
   color: $primary-color;
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   font-family: $heading-font-family;
}

Filename − Colors.scss

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

Filename − 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

Pros of Using the @import Directive

There are some benefits of using the ‘@import’ directive, which we have explained below.

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

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

Cons of Using the @import Directive

There are some drawbacks of using the ‘@import’ directive, which we have explained below.

• It makes all content of the CSS file, such as variables, functions, mixins, etc., globally accessible. So, It is hard for developers to tell where the particular variable is defined.

• As all content of every imported file becomes global, every file should have different variable names to avoid a collision.

• A SASS compiler compiles every scss file, whether imported or not, which increases the compilation time and reduces the efficiency of the code.

Partials in SASS

To solve the above drawbacks, we can use the partials in SASS. We can create a partial scss file by starting the file name with an underscore. For example, ‘_test.scss’, ‘_colors.scss’, etc.

Whenever we use the partials, the SASS transpiler doesn’t compile the code of partial files, which increases the efficiency of the code. However, we can import the content of the partial scss files into the main scss file.

Here is an example using the partial scss file.

Example 3

In the example below, we have created the ‘_colors.scss’ partial file and imported it in the ‘style.scss’ file. In this example, the compilation of code becomes more efficient as we have used the partial file.

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

Filename − Style.scss

@import "colors";
img {
   width: 100%;
   height: 100%;
   background-color: $background-color;
}
p {
   color: $text-color;
}

Filename - _Color.scss

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

Output

Users learned to use the ‘@import’ directive to import one file's code to another. It helps us to break down SCSS code into smaller chunks and avoid repetitions. However, there are some drawbacks of using the @import directive, but we can use partials to solve the issue.