Importing Files into SASS

When working with SASS files, it may be necessary to transfer code from a .scss document, but without creating a clone of it with the .css extension, i.e. import its fragment.

For example, we have a file navbar.scss with the following code:

navbar.scss.active {
  color: red;
}

To perform this type of import, you first need to add an underscore before the file name, like this: _navbar.scss. Then, in another file style.scss, write the directive @import, but do not specify the underscore or file extension in the name of the imported file:

style.scss@import "navbar";

And we see that when compiling, the code from the file _navbar.scss was imported into style.css:

style.css.active {
  color: red; 
}

main.scss.block-content {
  padding: 10px;
  margin-left: auto;
  width: 600px;
  font-size: 14px;
}