scss文件下划线的使用 scss文件下划线的使用

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; }

【scss文件下划线的使用】SASS片断使用下划线前缀命名，主要用于SASS命令行工具watch指定目录源码的场景；如果使用Webpack等打包工具则毋须顾虑该问题，CSS样式将会通过Webpack加载器，按照ES6风格的import或Webpack插件extract-text-webpack-plugin进行打包和模块化。