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:

.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:

@import "navbar";

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

.active {
	color: red; 
}

Create a file main.scss with the following contents:

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

Then import its fragment into the styles.scss file and compile it into styles.css.