scss中 % 符号的用途是什么

在前端开发中，SCSS作为一种强大的CSS预处理器，为开发者提供了许多便利和高效的功能。其中，% 符号有着独特且重要的用途。

% 符号在SCSS中用于定义占位符选择器。与常规的CSS类或ID选择器不同，占位符选择器本身不会在编译后的CSS文件中生成实际的CSS代码，除非它被继承或扩展。

占位符选择器可以实现代码的复用。比如，我们有多个元素需要共享一些相同的样式，传统的做法可能是定义一个类，然后在各个元素上添加这个类。而使用占位符选择器，我们可以定义一个包含通用样式的占位符，然后在需要的地方通过 @extend 指令来继承这些样式。这样可以避免重复编写相同的CSS代码，使代码更加简洁和易于维护。

例如：

%common-style {
  color: #333;
  font-size: 16px;
}

.button {
  @extend %common-style;
  background-color: blue;
}

.link {
  @extend %common-style;
  text-decoration: underline;
}

在上述代码中，.button和.link都继承了 %common-style 中的样式，实现了代码的复用。

占位符选择器有助于提高CSS的性能。由于占位符选择器不会在编译后的CSS中直接生成代码，只有在被扩展时才会被添加到最终的CSS中，这样可以减少不必要的CSS代码量，从而提高页面的加载速度。

占位符选择器还可以与其他SCSS功能（如嵌套、混合等）结合使用，进一步增强代码的灵活性和可维护性。

需要注意的是，虽然占位符选择器带来了很多好处，但也不能滥用。过度使用可能会导致CSS选择器的复杂性增加，影响代码的可读性和性能。

SCSS中的 % 符号通过定义占位符选择器，为开发者提供了一种高效的代码复用和优化方式，合理使用可以提高开发效率和页面性能。