什么是 gulp-better-sass-inheritance
gulp-better-sass-inheritance 是一个 Gulp 插件，用于改进 Sass/CSS 的编译性能。它使用增量编译，仅编译需要更新的文件，而不是全部重新编译。这样可以显著提高编译速度，并减少系统资源的使用。
安装 gulp-better-sass-inheritance
在使用 gulp-better-sass-inheritance 之前，我们需要先安装它。可以使用 npm 安装它，安装命令如下：
npm install gulp-better-sass-inheritance --save-dev
安装完成后，我们就可以在 Gulp 中使用 gulp-better-sass-inheritance 了。
使用 gulp-better-sass-inheritance
基本使用
使用 gulp-better-sass-inheritance 很简单，只需要在 Gulpfile.js 文件中引入它，然后在 Gulp 中使用它就可以了。下面是一个简单的例子：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------------- - ----------------------------------------
--- ---- - ---------------------
----------------- -------- -- -
------ ---------------------------
---------------------------- ----------
------------------------ ---------------
---------------------------
---在上面的例子中，我们首先引入 gulp-better-sass-inheritance 和 gulp-sass。然后创建了一个名为 sass 的 Gulp 任务，使用 gulp.src() 方法获取所有 .scss 文件，并通过 sassInheritance() 方法对这些文件进行增量编译，最后使用 gulp.dest() 方法将编译后的文件输出到 dist 目录中。
需要注意的是，在使用 gulp-better-sass-inheritance 时，需要传递一个参数 base，用于指定 Sass 源文件夹的基础路径，以便正确地找到文件之间的依赖关系。
深度使用
除了基本使用之外，gulp-better-sass-inheritance 还提供了一些高级功能，可以帮助我们更好地使用它。
1. 自定义选择器
在 Sass 中，我们可以使用 @import 关键字将一个 SCSS 文件导入到另一个 SCSS 文件中。但是，如果我们导入的文件有一些与当前文件冲突的选择器，就会导致编译错误。gulp-better-sass-inheritance 提供了一个自定义选择器的功能，可以帮助我们解决这个问题。
例如，我们有两个 SCSS 文件分别为 a.scss 和 b.scss，其中都有一个 .box 选择器，我们想要将 b.scss 导入到 a.scss 中，但是由于冲突，编译会出错。这时我们可以使用 gulp-better-sass-inheritance 提供的自定义选择器功能。
首先在 a.scss 文件中定义一个自定义选择器：
/* a.scss */
.custom-selector {
@import 'b';
}然后在 b.scss 文件中使用该自定义选择器：
/* b.scss */
.custom-selector .box {
display: flex;
}这样就可以避免 .box 选择器的冲突了。
2. 额外文件扩展名
gulp-better-sass-inheritance 默认情况下只支持 .scss 文件的增量编译，如果需要支持其他文件扩展名的增量编译，可以使用额外文件扩展名功能。
例如，我们希望支持 .sass 文件的增量编译，可以在 Gulp 中这样使用：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------------- - ----------------------------------------
--- ---- - ---------------------
----------------- -------- -- -
------ ----------------------------------
---------------------------- -------- --------------------- ------------
------------------------ ---------------
---------------------------
---在 sassInheritance() 方法中传递了一个名为 additionalExtensions 的参数，该参数可以用于指定额外的文件扩展名。
示例代码
下面是一个完整的示例代码，供大家参考：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------------- - ----------------------------------------
--- ---- - ---------------------
----------------- -------- -- -
------ ----------------------------------
---------------------------- -------- --------------------- ------------
------------------------ ---------------
---------------------------
---
------------------ -------- -- -
------------------------------------ ----------
---
-------------------- -------- ----------总结
gulp-better-sass-inheritance 是一个强大的增量编译工具，可以大大提高 Sass/CSS 的编译性能。它具有自定义选择器和额外文件扩展名的高级功能，可以方便地应对复杂的 SCSS 文件。
在使用 gulp-better-sass-inheritance 时，需要注意一些细节，例如传递 base 参数和使用 additionalExtensions 参数。希望这篇文章对大家使用 gulp-better-sass-inheritance 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557df81e8991b448d4ed6