Sisäkkäinen @import SASS:ssa

Normaalisti @import käytetään asiakirjan alussa, mutta SASS-esiprosessori sallii tiedostojen tuomisen mihin tahansa haluamasi tiedoston osaan, mukaan lukien sisaan valitsijoiden.

Tarkastellaan seuraavaa esimerkkiä:

main.scss.active {
  color: blue;
}

Seuraavaksi tuomme sen tiedostoon style.scss:

style.scssdiv {
  @import "main";
}

Katsotaan nyt kääntämisen tulosta:

style.cssdiv .active {
  color: blue; 
}

Задание 1

Luo tiedosto navbar.scss jolla on seuraava sisältö:

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

Tuo sitten tämä fragmentti #main -lohkoon tiedostossa styles.scss ja suorita kääntäminen tiedostoon styles.css.