.container-a {width: 200px;height: 100px;margin-left: 10px; }.container-b {@extend .container-a; // 在沒有被調用的時候就會被解析background-color: #fffccc; }

編譯之后生成的css：container-a和container-b有一部分被合并了：

.container-a, .container-b {width: 200px;height: 100px;margin-left: 10px; }.container-b {background-color: #fffccc; }

看另一個例子:

%organizationCard {.card {width: 100%;@include media-breakpoint-down(sm) {border: none;}@extend %cardHeader !optional;@extend %cardMain !optional;@extend %cardSection !optional;@extend %jerry;} }%jerry {h3 {color: red;} }

可以理解成編程語言里的宏替換:

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的scss里的继承操作符@extend的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。