Introduction to Sass Import
Sass @import
Sass @import
is a directive that is used to include the content of one Sass file in another Sass file. The @import
directive helps to keep the code modular and organized, making it easier to maintain and update.
To use the @import
directive in Sass, you can simply include the @import
keyword, followed by the name of the file you want to include.
As an example:
To include the contents of a file called "styles.scss"
, you would write:
@import "styles";
By default, Sass will look for the file named "styles.scss"
in the same directory as the file where the @import
directive is written.
However, you can also use a relative or absolute path to import files from other directories.
As an example:
To import a file located in a subdirectory, you can write:
@import "partials/_variables";
This will import the file "\_variables.scss"
from the "partials"
directory, assuming that the "partials"
directory is located in the same directory as the current Sass file.
@use
Since Sass version 3.5, it's recommended to use the @use
directive instead of @import
. The @use
directive provides better scoping and performance than @import
.