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.
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;
}
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.