Ενσωματωμένη Εισαγωγή στο SASS

Συνήθως το @import χρησιμοποιείται στην αρχή του εγγράφου, αλλά ο προεπεξεργαστής SASS επιτρέπει την εισαγωγή αρχείων σε οποιοδήποτε σημείο του αρχείου μας, συμπεριλαμβανομένου και μέσα σε επιλογείς.

Ας εξετάσουμε το ακόλουθο παράδειγμα:

.active {
	color: blue;
}

Στη συνέχεια, θα το εισάγουμε στο αρχείο style.scss:

div {
	@import "main";
}

Τώρα ας δούμε το αποτέλεσμα της μεταγλώττισης:

div .active {
	color: blue; 
}

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

.link {
	color: red;
	font-size: 12px;
}

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