3-3. 嵌套導(dǎo)入

跟原生的css不同，sass允許@import命令寫在css規(guī)則內(nèi)。這種導(dǎo)入方式下，生成對(duì)應(yīng)的css文件時(shí)，局部文件會(huì)被直接插入到css規(guī)則內(nèi)導(dǎo)入它的地方。舉例說(shuō)明，有一個(gè)名為_blue-theme.scss的局部文件，內(nèi)容如下:

aside {
  background: blue;
  color: white;
}

然后把它導(dǎo)入到一個(gè)CSS規(guī)則內(nèi)，如下所示:

.blue-theme {@import "blue-theme"}

//生成的結(jié)果跟你直接在.blue-theme選擇器內(nèi)寫_blue-theme.scss文件的內(nèi)容完全一樣。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

被導(dǎo)入的局部文件中定義的所有變量和混合器，也會(huì)在這個(gè)規(guī)則范圍內(nèi)生效。這些變量和混合器不會(huì)全局有效，這樣我們就可以通過(guò)嵌套導(dǎo)入只對(duì)站點(diǎn)中某一特定區(qū)域運(yùn)用某種顏色主題或其他通過(guò)變量配置的樣式。

有時(shí)，可用css原生的@import機(jī)制，在瀏覽器中下載必需的css文件。sass也提供了幾種方法來(lái)達(dá)成這種需求。