Sass 编程中 @extend 的使用方式与注意事项
Sass 是一个常用的 CSS 预处理器，可以通过 Sass 编译器将 Sass 代码转换成符合 CSS 标准的代码。而 @extend 是 Sass 中非常强大的一项特性，可以让我们轻松复用已有的 CSS 样式。本篇文章将介绍 Sass 编程中 @extend 的使用方式及需要注意的事项。
使用方式
@extend 可以让我们复用某些 CSS 样式。举个例子，我们想让两个元素的样式一模一样：
-- -------------------- ---- ------- ----- - ------ ------ ------- ------ ----------------- ---- - ----- - ------ ------ ------- ------ ----------------- ---- -展开代码
我们需要写两次相同的代码。而使用 @extend 可以非常简洁地实现：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ---- - ----- - ------- ----- - ----- - ------- ----- -展开代码
@extend 不仅可以继承类名，还可以继承选择器，类似于 CSS 中的组合选择器。比如：
div.box { width: 100px; height: 100px; background-color: red; } p.box { @extend div.box; }
注意事项
@extend 也有一些需要注意的地方：
- @extend 会把继承的样式合并到当前选择器中，而不是生成新的选择器。如果样式中有相同的属性，会被覆盖掉。
举个例子：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ---- - ----- - ------- ----- ----------------- ----- -展开代码
此时，.box1 的 background-color 会被覆盖成 blue。
- 不要滥用 @extend，否则会生成过多的选择器，增加文件大小。如果可以用 mixin 实现，尽量使用 mixin。举个例子：
-- -------------------- ---- ------- -- ---- ------- -- ---- - ------ ------ ------- ------ ----------------- ---- - ----- - ------- ----- - ----- - ------- ----- - -- -- ----- -- ------ --- - ------ ------ ------- ------ ----------------- ---- - ----- - -------- ---- - ----- - -------- ---- -展开代码
- 不要把 @extend 和嵌套一起使用，否则会让代码变得复杂。举个例子：
-- -------------------- ---- ------- -- --- ------- ------- -- ---- - ------ ------ ------- ------ ----------------- ---- - ----- - ----- - ------- ----- - ----- - ------- ----- - - -- ----- ----- -- ------ --- - ------ ------ ------- ------ ----------------- ---- - ----- - ----- - -------- ---- - ----- - -------- ---- - -展开代码
总之，@extend 是 Sass 中非常强大的一项特性。但是，需要注意其使用方式和注意事项，以便编写出更加简洁清晰的 Sass 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b88733306f20b3a6651221
