Importowanie plików w SASS
Podczas pracy z plikami SASS często zachodzi potrzeba
przeniesienia kodu z dokumentu .scss, ale
bez tworzenia jego klona z rozszerzeniem .css,
czyli zaimportowania jego fragmentu.
Na przykład, mamy plik navbar.scss z następującym kodem:
.active {
color: red;
}
Aby wykonać tego rodzaju import,
najpierw należy dodać podkreślenie
przed nazwą pliku, w ten sposób: _navbar.scss.
Następnie w innym pliku style.scss zapisujemy
dyrektywę @import, ale w nazwie
importowanego pliku podkreślenia,
jak i rozszerzenia pliku nie podajemy:
@import "navbar";
I widzimy, że po kompilacji do style.css
zaimportował się kod pliku _navbar.scss:
.active {
color: red;
}
Utwórz plik main.scss
z następującą zawartością:
.block-content {
padding: 10px;
margin-left: auto;
width: 600px;
font-size: 14px;
}
Następnie zaimportuj jego fragment do pliku
styles.scss i skompiluj
do styles.css.