Εισαγωγή αρχείων σε SASS

Κατά την εργασία με αρχεία SASS, υπάρχει μερικές φορές ανάγκη να μεταφερθεί κώδικας από ένα έγγραφο .scss, αλλά χωρίς τη δημιουργία κλώνου του με επέκταση .css, δηλαδή να εισαχθεί ένα τμήμα του.

Για παράδειγμα, έχουμε ένα αρχείο navbar.scss με τον ακόλουθο κώδικα:

.active {
	color: red;
}

Για να πραγματοποιηθεί αυτού του είδους η εισαγωγή πρώτα πρέπει να προσθέσουμε μια κάτω παύλα πριν από το όνομα του αρχείου, έτσι: _navbar.scss. Στη συνέχεια, σε ένα άλλο αρχείο style.scss γράφουμε την οδηγία @import, αλλά στο όνομα του αρχείου που εισάγεται, η κάτω παύλα, όπως και η επέκταση του αρχείου δεν αναγράφονται:

@import "navbar";

Και βλέπουμε ότι κατά τη μεταγλώττιση στο style.css εισάγεται ο κώδικας του αρχείου _navbar.scss:

.active {
	color: red; 
}

Δημιουργήστε ένα αρχείο main.scss με το ακόλουθο περιεχόμενο:

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

Στη συνέχεια εισαγάγετε ένα τμήμα του στο αρχείο styles.scss και μεταγλωττίστε το σε styles.css.