Nested Imports in SASS
Typically @import is used at the beginning of the document, but the SASS preprocessor allows us to import files into any part of the file we need, including inside selectors.
Let's consider the following example:
.active {
color: blue;
}
Next, we import it into the style.scss file:
div {
@import "main";
}
Now let's look at the compilation result:
div .active {
color: blue;
}
Create a file navbar.scss with the following contents:
.link {
color: red;
font-size: 12px;
}
Then import this fragment into the #main block of the styles.scss file and compile it into styles.css.
