Вложен импорт в SASS

Обикновено @import се използва в началото на документа, но препроцесорът SASS позволява да се импортират файлове във всяка част от нужния ни файл, включително и вътре в селектори.

Нека разгледаме следния пример:

main.scss.active {
  color: blue;
}

След това го импортираме във файла style.scss:

style.scssdiv {
  @import "main";
}

Сега нека погледнем резултата от компилацията:

style.cssdiv .active {
  color: blue; 
}

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