YouTipSass Import Partials
# Sass @import
Sass can help us reduce repetitive CSS code and save development time.
We can create some code files with different attributes, such as: files for variable definitions, color-related files, font-related files, etc.
* * *
## Sass Import Files
Similar to CSS, Sass supports the @import directive.
The @import directive allows us to import other files and more.
The CSS @import directive creates an extra HTTP request each time it is called. However, the Sass @import directive includes the file in the CSS and does not require an additional HTTP request.
The Sass @import directive syntax is as follows:
@import filename;
**Note:** When including a file, you don't need to specify the file extension, Sass will automatically add the extension .scss.
In addition, you can also import CSS files.
After importing, we can use the imported file's variables in the main file.
In the following example, we import the variables.scss, colors.scss, and reset.scss files.
## Sass Code:
@import"variables";
@import"colors";
@import"reset";
Next, we create a reset.scss file:
## reset.scss File Code:
html,
body,
ul,
ol {
margin:0;
padding:0;
}
Then we use the @import directive in the standard.scss file to import the 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;
}
* * *
## Sass Partials
If you don't want a Sass code file to be compiled into a CSS file, you can add an underscore at the beginning of the filename. This will tell Sass not to compile it into a CSS file.
However, we don't need to add an underscore in the import statement.
Sass