scss的@extend到底是怎么工作的？

Question

网上查了资料都是一些案例，没有告诉你规律，比如下面一个例子：
编译前

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

编译后

#admin .tabbar a, 
#admin .tabbar #demo .overview .fakelink, 
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold;
}

前面两个还好理解点，最后这个#demo .overview #admin .tabbar .fakelink是咋形成？

Answer 1

// input
.a1 .a2 .a3 {
  foo: bar;
}
.b1 .b2 .b3 {
  @extend .a3;
}


// output
.a1 .a2 .a3,
.a1 .a2 .b1 .b2 .b3,
.b1 .b2 .a1 .a2 .b3 {
  foo: bar;
}

看出规律了吗？

实际拆分成前后两个部分：

A a
B b @extend a

A 跟 B 做笛卡尔积得到：

A B b
B A b

Answer 2

https://www.sass.hk/guide/
看下6-4. 使用继承的最佳实践;