在前端开发中，使用 css 框架通常能够大幅提升我们的开发效率，而其中最为常用的几个框架中，less 也是一个十分常见而强大的选项。而在使用 less 进行开发时，我们通常需要使用 gulp 进行编译，以将 less 转为 css 文件。然而，在 less 文件中使用 mixin 或 extend 时，若我们需要对这些样式进行继承，就需要使用到 less 的父子选择器功能（&）了。而对于动态的父选择器，less 并没有原生支持，这就需要使用到一个 npm 包：gulp-less-dynamic-parentclass。
安装
在使用 gulp-less-dynamic-parentclass 前，我们需要先安装 gulp 和 gulp-less，然后使用 npm 安装 gulp-less-dynamic-parentclass。
npm install gulp gulp-less gulp-less-dynamic-parentclass --save-dev
使用
在 gulpfile.js 中引用所需的包：
const gulp = require('gulp');
const less = require('gulp-less');
const lessDynamicParentclass = require('gulp-less-dynamic-parentclass');然后，在 less 文件中使用 lessDynamicParentclass 函数进行编译，在编译时将 lessDynamicParentclass 函数作为 less 函数的参数即可。
gulp.task('less', function() {
return gulp.src('src/*.less')
.pipe(less({
plugins: [lessDynamicParentclass()]
}))
.pipe(gulp.dest('dist'));
});这时，less 文件中就可以使用动态的父选择器了。
.parent {
&.-active {
color: #f00;
}
}示例
下面，我们以一个简单的示例来展示如何使用 gulp-less-dynamic-parentclass。
首先，创建一个 less 文件：
-- -------------------- ---- -------
------- -
------ -----
--------- -
------ -----
-
------ -
------ -----
--------- -
------ -----
-
-
-这个 less 文件中，我们定义了一个父元素和一个子元素，并在它们的样式中使用了动态的父选择器。当它们的 class 中包含 -active 时，它们的颜色都会发生改变。
然后，在 gulpfile.js 中创建 task：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ---------------------
----- ---------------------- - -----------------------------------------
----------------- ---------- -
------ ----------------------
------------
-------- --------------------------
---
-------------------------
---
-------------------- ----------最后，在终端中输入以下命令进行编译：
gulp
现在，我们就可以在 dist 文件夹中找到编译后的 css 文件了。打开它，可以看见我们刚刚编写的 less 文件已经成功转化为 css 文件，而其中的动态父选择器的效果也如预期一样。
结论
通过上述示例，我们掌握了使用 npm 包 gulp-less-dynamic-parentclass 进行 less 文件的编译，并如何使用动态的父选择器。这一技巧在实际的前端开发中经常使用，掌握之后能够大幅提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e86e9