SASS 中的%的作用是什么？

SASS 中的 % 主要用于定义一个可继承的样式，这种方式在 SASS 中被称为占位选择器（placeholder selector）。使用 % 定义的样式本身不会产生任何 CSS 输出，除非这些样式被 @extend 指令在其他选择器中引用。

作用和好处

占位选择器的主要作用是帮助我们创建一些可重用的样式模块，而不必担心生成过多的冗余代码。当我们使用类选择器（.）来创建通用样式时，即使某些样式并未用到，它们仍然会在生成的 CSS 文件中出现。而使用占位选择器，只有当这些样式被实际引用时，它们的代码才会被包含在最终的 CSS 文件中。

示例

以下是一个使用 SASS 占位选择器的例子：

scss
// 定义一个占位选择器
%text-shared-style {
  font-family: Arial, sans-serif;
  color: blue;
  font-size: 14px;
}

// 使用 @extend 引用占位选择器
.error-message {
  @extend %text-shared-style;
  color: red;
}

// 使用 @extend 引用占位选择器
.info-message {
  @extend %text-shared-style;
  color: green;
}

在上述例子中，%text-shared-style 是一个占位选择器，它定义了一些文本的共通样式。我们没有直接使用类或元素选择器，而是使用 @extend 在 .error-message 和 .info-message 中引用了这些样式。这样，只有在 .error-message 和 .info-message 被实际使用的地方，%text-shared-style 中定义的样式才会被输出到 CSS 文件中，并应用相应的颜色修改。

这种方法的优点是可以减少重复的代码，提高 CSS 的维护性和可扩展性。同时，使用占位选择器可以有助于保持样式表的干净和组织性。