SASS 中的 % extend 和 @extend 区别
% extend 和 @extend 是 Sass 中两个非常重要的特性，它们可以提高样式复用性，简化代码量，使得前端开发更加高效。虽然它们的名字很相似，但实际上它们在 Sass 中有着不同的作用和用法，本文将详细介绍两者区别以及使用方式。
- % extend
% extend 是 Sass 中的占位符选择器，它类似于 CSS 中的类选择器，但与类选择器不同的是，% 占位符选择器在 CSS 输出中不会产生任何代码，只有当它被 @extend 关键字调用时，才会生成对应的 CSS 代码。换句话说，% extend 可以被理解为是一个样式集合，只有在需要使用时才会被展开。
使用方法：
%placeholder {
color: blue;
}
.some-selector {
@extend %placeholder;
}上面的示例代码使用 %placeholder 定义了一个占位符选择器，定义了一个颜色为蓝色的样式。然后使用 .some-selector 类选择器调用 @extend %placeholder，即将 %placeholder 的样式应用于 .some-selector。在 CSS 输出中，.some-selector 类选择器会被编译为 .some-selector {}，而 %placeholder 则不会产生任何代码。
使用占位符选择器的好处在于，它的样式只有在被调用时才会生成真正的 CSS 代码，而不会像类选择器一样出现重复的代码，从而大大减少了代码输出的大小。
- @extend
@extend 和 % extend 是两个不同的特性，但它们的命名和语法比较相似，容易混淆。事实上 @extend 是 Sass 中的属性继承，它的作用是将一个选择器的属性继承给另一个选择器，从而实现样式的复用和代码的简化。
使用方法：
.first-selector {
color: red;
}
.second-selector {
@extend .first-selector;
font-size: 16px;
}上面的示例代码中，.first-selector 定义了一个颜色为红色的样式，然后使用 @extend .first-selector 将这个样式继承给了 .second-selector，这里需要注意的是，被继承的选择器必须是已经定义过的样式。最终的 CSS 输出中，.second-selector 会继承 .first-selector 的样式，并添加了一个字体大小为 16px 的样式。
@extend 的好处在于，它可以将一个选择器的样式快速复制到另一个选择器中，避免了样式冗余和代码的重复，同时还可以提高 CSS 的优化，减少选择器的数量，提高网站的性能。
总结：
% extend 和 @extend 在 Sass 中都是非常重要的特性，它们可以提高样式的复用和代码的简化，但两者的作用和用法略有不同。% extend 是占位符选择器，只有在被调用时才会生成对应的 CSS 代码；而 @extend 是属性继承，可以将一个选择器的样式复制到另一个选择器中。在使用时需要注意两者的区别，避免混淆，提高代码的可维护性和可读性。
示例代码：
-- -------------------- ---- ------- ------ - ------ ----- - ------ - ------- ------- ------ ------ ------- ------ ------------- ----- - ----- - ------- ------- ---------- ----- ------ ----- -
上面的示例代码中，定义了一个名为 %float 的占位符选择器，其中定义了浮动为左浮动。然后使用 @extend %float 将浮动样式应用于 .image 和 .text 选择器，从而实现了样式的复用和代码的简化。在 CSS 输出中，只会存在一次浮动样式，大大减少了输出的代码大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66570781d3423812e4c2504c