3-3. 嵌套導入

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

aside {
  background: blue;
  color: white;
}

然后把它導入到一個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;
  }
}

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

有時，可用css原生的@import機制，在瀏覽器中下載必需的css文件。sass也提供了幾種方法來達成這種需求。