不晓得各位同学有没有感觉当初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的文字色彩改成了彩色。
这里咱们留神到 & 放到了类名前面，请大家再次领会一下。
其实 & 的地位放在哪里都是能够当作父级来应用的，应用的次数也没有限度，能够应用两个甚至更多。

完结

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