SASS能夠將代碼分割為多個片段,并以underscore風格的下劃線作為其命名前綴(_partial.scss),SASS會通過這些下劃線來辨別哪些文件是SASS片段,并且不讓片段內容直接生成為CSS文件,從而只是在使用@import指令的位置被導入。CSS原生的@import會通過額外的HTTP請求獲取引入的樣式片段,而SASS的@import則會直接將這些引入的片段合并至當前CSS文件,并且不會產生新的HTTP請求。下面例子中的代碼,將會在base.scss文件當中引入_reset.scss片斷。
// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
SASS中引入片斷時,可以缺省使用文件擴展名,因此上面代碼中直接通過@import 'reset'引入,編譯后生成的代碼如下
html, body, ul, ol {
margin: 0;
padding: 0; }
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef; }
SASS片斷使用下劃線前綴命名,主要用于SASS命令行工具watch指定目錄源碼的場景;如果使用Webpack等打包工具則毋須顧慮該問題,CSS樣式將會通過Webpack加載器,按照ES6風格的import或Webpack插件extract-text-webpack-plugin進行打包和模塊化。