你的less父级选择器-玩出花了吗

不晓得各位同学有没有感觉当初 css 在前端圈子里越来越不受“待见”了。
起因可能有下：

• 难以模块化，不可保护，没啥能够深入研究的
• 面试根本也不会问啊
• 局部公司还有 css 工程师，前端不须要关怀
• 。。。

然而作为从看张鑫旭大佬的文章才一步步开启我的前端之路的开发 er，我可不能“忘了本”。犹记得才刚刚转行那会面试的时候会问我“你感觉本人 css 和 js 哪个更善于？”，我都会不犹豫的说“css”。

平时用 BEM 规定写款式的同学可能常常会遇到上面这样的（相似）场景，标签列表中会有失常状态和选中状态。故事的开始就是起于这样一段 html 代码：

<!-- 第 1 种组织模式，集体比拟偏向这种 -->
<!-- tag 外面的子节点变多的时候不须要给每一个子节点都增加 --active 的修饰符 -->
<div class="tag tag--active">
    <img src=""class="tag__img" />
    <span class="tag__text">222</span>
</div>

<!-- 第 2 种组织模式 -->
<!-- 可能更合乎 bem 的 思维（缩小款式嵌套）-->
<div class="tag">
    <img src=""class="tag__img--active" />
    <span class="tag__text--active">222</span>
</div>

针对第一种 html 的构造，如何通过父级选择器 & 更优雅的写出款式。当初咱们就从 & 的根底用法一步步说起。

为了不便咱们应用命令行测试，请全局装置 less

npm install less -g // 以后版本：3.11.3

上面的例子都是基于常见的通过 BEM 写款式的业务场景。

置信看完这篇文章的同学再用 BEM 规定写款式的时候代码肯定会土气的一批。

根本用法

& 运算符示意一个嵌套规定的父选择器

下面是 less 官网对于 & 的定义（请肯定要粗浅领会），上面咱们通过例子来逐渐感触。

.header {
    &__text {
        color: #000;
        &--active {color: #fff;}
    }
    &:before {
        content: '';
        display: block;
    }
    &.test3 {font-size: 12px;}
}

通过 lessc 编译后：

.header__text {color: #000;}
.header__text--active {color: #fff;}
.header:before {
  content: '';
  display: block;
}
.header.test3 {font-size: 12px;}

能够看到，& 援用了间隔他 最近的残缺的父级 。
为什么强调是残缺的父级呢，.header__text--active 而不是 .text--active 就是最好的证实。可能很多同学对于 & 的用法也就到这里就完结了（包含我本人以及身边很多工作好多年的共事，没错，我用上面的例子给他们做了测试，哈哈哈哈），如果你对“工程卓越”有谋求的话请持续往下看。

高阶用法

对于开篇提到的那个 html 构造，如何优雅的写 active 状态的款式笼罩，也有相当一段长的工夫困扰着我，甚至写了一段时间这样的代码：

.tag {
    &__img {
        width: 100px;
        height: 100px;
    }
    &__text {
        font-size: 14px;
        color: #fff;
    }
    &--active {
        .tag__img {background: #000;}
        .tag__text {color: #000;}
    }
}

几乎是丑到家了。实际上各位同学如果真的能了解父级选择器，认真思考一下同时摈弃你的惯性思维，就能写出上面的代码：

.tag {
    &__img {
        width: 100px;
        height: 100px;
    }
    &__text {
        font-size: 14px;
        color: #fff;
    }
    &--active &__img {background: #000;}
    &--active &__text {color: #000;}
}

通过 lessc 命令看看最终转成啥样：

.tag__img {
  width: 100px;
  height: 100px;
}
.tag__text {
  font-size: 14px;
  color: #fff;
}
.tag.tag--active .tag__img {background: #000;}
.tag.tag--active .tag__text {color: #000;}

请大家好好消化，其实 & 就是代替父级的存在。
在下面场景的根底上，咱们再思考下另一个相似的状况：

<div class="tag active">
    <img src=""class="tag__img" />
    <span class="tag__text">222</span>
</div>

和下面不同的是，咱们应用 active 来代替 tag–active。这在理论开发的场景中是很常见的。active 作为一个全局定义好的通用选中状态，利用到业务场景中。那么当初如何再去笼罩 tag__text 的款式呢？

.tag {
    &__img {
        width: 100px;
        height: 100px;
    }
    &__text {
        font-size: 14px;
        color: #fff;
    }
    .active & {
        &__text {#000;}
    }
}

通过 lessc 命令看看最终转成啥样：

.tag__img {
  width: 100px;
  height: 100px;
}
.tag__text {
  font-size: 14px;
  color: #fff;
}
.active .tag__text {color: #000;}

胜利的将 active 状态下的 tag__text 的文字色彩改成了彩色。
这里咱们留神到 & 放到了类名前面，请大家再次领会一下。
其实 & 的地位放在哪里都是能够当作父级来应用的，应用的次数也没有限度，能够应用两个甚至更多。

完结

文章到这里就完结了，心愿看完的同学能减少对于 & 的意识，更重要的是能重拾起来对于款式的“工程卓越”的谋求。
最初，以此文留念本人刚开始学习前端的日子。