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

回复
阅读 533
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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏