Sass/SCSS中使用@extend继承合并复杂选择器列的奇怪规则

最近在看Sass/SCSS的中文文档，但是这份中文文档翻译的不全，和英文官网的文档格式也不一样。可能是翻译的旧版本文档？链接地址：

https://www.sass.hk/docs/

不过部分内容讲的还算挺清晰的，我也就拿来学习了。

 

其中关于@extend指令，7.3.5.1. 合并选择器列 (Merging Selector Sequences)中描述的一种情况，吸引了我的兴趣。

文档原文：

一共可能的10种情况，但是仅仅生成两个？难道剩下8种情况都是没用的？

我心想：这份文档本身就不完整，所以是不是写错了？我打算研究一下。

 

我自己写了一个继承模式：

.div1 .div2 p {
  color: red;
}
.div3 .div4 .div5 {
  @extend p;
}

这个继承模式除了名字变了之外，与文档中的是相同的。

在这个继承模式中，继承规则为：符合选择器 .div1 .div2，且符合选择器 .div3 .div4 .div5的模式即可。也就是说，只要保证.div2在.div1内部，且.div4 在.div3内部，且.div5在.div4内部，就是符合规则的继承模式。

 

我们省略.div，只用数字表示选择器，则10种情况如下：

1. 12345
2. 13245
3. 13425
4. 13452
5. 31245
6. 31425
7. 31452
8. 34125
9. 34152
10. 34512

我们编写代码来测试一下，这10种情况是否都有效果。代码使用的是vue.js的单文件组件。

<template>
  <div id="app">
    <div class="div1">
      <div class="div2">
        <p>示例</p>
      </div>
    </div>
    <div class="div1">
      <div class="div2">
        <div class="div3">
          <div class="div4">
            <div class="div5">12345</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div1">
      <div class="div3">
        <div class="div2">
          <div class="div4">
            <div class="div5">13245</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div1">
      <div class="div3">
        <div class="div4">
          <div class="div2">
            <div class="div5">13425</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div1">
      <div class="div3">
        <div class="div4">
          <div class="div5">
            <div class="div2">13452</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div3">
      <div class="div1">
        <div class="div2">
          <div class="div4">
            <div class="div5">31245</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div3">
      <div class="div1">
        <div class="div4">
          <div class="div2">
            <div class="div5">31425</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div3">
      <div class="div1">
        <div class="div4">
          <div class="div5">
            <div class="div2">31452</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div3">
      <div class="div4">
        <div class="div1">
          <div class="div2">
            <div class="div5">34125</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div3">
      <div class="div4">
        <div class="div1">
          <div class="div5">
            <div class="div2">34152</div>
          </div>
        </div>
      </div>
    </div>
    <div class="div3">
      <div class="div4">
        <div class="div5">
          <div class="div1">
            <div class="div2">34512</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
};
</script>

<style lang="scss">
.div1 .div2 p {
  color: red;
}
.div3 .div4 .div5 {
  @extend p;
}
</style>

示例表示继承的来源，如果继承成功，对应的数字序列在浏览器中应该标红。

测试结果：

为什么只有两个变红了？明明这10个都符合规则。我再回去看了文档中描述的生成规则，发现文档中描述的就是仅生成两个选择器，而生成的模式就是12345和34125。

但是为什么这两种才是有用的？文档中没有讲。

 

我又去看了英文官网种关于这样部分的文档：

https://sass-lang.com/documentation/at-rules/extend

文档中也是仅仅说了对于的复杂的选择器并不会生成全部可能的组合而是采用启发式方法，但是具体细节没有讲（链接里也没有讲细节），而且也是举了一个与上面选择器相同的例子。