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.