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

给点阳光yh
  • 281

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

#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是咋形成?

回复
阅读 555
2 个回答
// 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

AB 做笛卡尔积得到:

A B b
B A b
宣传栏