13.5. Sass @ import

Sass can help us reduce repetitive code in CSS and save development time.

We can install different properties to create some code files, such as variable definition files, color-related files, font-related files, and so on.

13.5.1. Sass Import Fil ¶

Similar to CSS,Sass support @import instructions.

@import directive allows us to import other files and so on.

CSS @import each time the instruction is called, an additional HTTP request is created. But, Sass, @import directive to include the file inthe CSS and no additional HTTP requests are required.

Sass the @import instruction syntax is as follows:

@import filename;

Note: there is no need to specify a file suffix when including a file. Sass will automatically add a suffix .scss .

In addition, you can also import CSS files.

After import, we can use variables such as import files in the main file.

For the following example, import variables.scss 、 colors.scss and reset.scss files.

Sass Code: ¶

@import "variables";
@import "colors";
@import "reset";

Next, let’s create a reset.scss file:

`reset.scss` file code: ¶

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

And then we’re here. standard.scss used in the file @import instruction import reset.scss file:

`standard.scss` file code: ¶

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Convert the above code to CSS code, as follows:

Css Code: ¶

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

13.5.2. Sass Partials ¶

If you don’t want to compile a Sass code file into a CSS file, you can add an underscore at the beginning of the file name. This will tell Sass not to compile it into a CSS file.

However, we do not need to add an underscore in the import statement.

Sass Partials syntax format:

_filename;

The following example creates a \_colors.scss , but will not be compiledinto \_colors.css file:

`\_colors.scss` file code: ¶

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

If you are importing the file, you do not need to use an underscore:

Example ¶

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}

Note: please do not put underlined and ununderlined files of the same name in the same directory, such as _colors.scss and colors.scss cannotexist in the same directory at the same time, otherwise underlined files will be ignored.