SASS 是一种 CSS 预处理器，它可以让我们在编写 CSS 时更加高效、灵活和易于维护。其中，超级选择器 %（placeholder）是 SASS 中非常强大的一个特性，本文将详细介绍它的使用方法和应用场景。
什么是 %（placeholder）？
在 SASS 中，%（placeholder）是一种特殊的选择器，它以 % 开头，并且不会被编译成 CSS，只有在被继承时才会被编译。它类似于 CSS 中的类选择器，但有一些重要的区别，如下所示：
- %（placeholder）不能直接使用，只能被继承；
- %（placeholder）不会被编译成 CSS，只有在被继承时才会被编译；
- %（placeholder）不能被 ID 选择器、标签选择器等继承，只能被类选择器继承。
如何使用 %（placeholder）？
使用 %（placeholder）非常简单，只需要在 SASS 中定义一个 %（placeholder），并在需要继承它的选择器中使用 @extend 指令即可。
下面是一个简单的示例：
-- -------------------- ---- ------- ------- - -------- ------------- -------- ---- ----- ----------------- -------- ------ ----- - ------------ - ------- -------- - ----------- - ------- -------- ----------------- -------- -
在上面的示例中，我们定义了一个 %button，它包含了按钮的基本样式。然后，我们使用 @extend 指令在 .btn-primary 和 .btn-danger 中继承了 %button，这样就可以复用 %button 中的样式了。
%（placeholder）的优势
使用 %（placeholder）的优势在于可以让我们更加高效、灵活和易于维护地编写 CSS。具体来说，%（placeholder）的优势如下：
1. 复用样式
使用 %（placeholder）可以让我们复用样式，避免重复编写相同的样式代码。这样可以减少代码量，提高开发效率。
2. 提高可维护性
使用 %（placeholder）可以让我们更好地组织样式代码，使其更加清晰、易于理解和维护。这样可以降低代码维护成本，提高代码质量。
3. 减少 CSS 文件大小
使用 %（placeholder）可以避免重复编译相同的样式代码，从而减少 CSS 文件的大小，提高页面加载速度。
%（placeholder）的应用场景
使用 %（placeholder）可以应用于各种场景，下面列举了几个常见的应用场景：
1. 统一样式
使用 %（placeholder）可以定义一些基本的样式，如按钮、表单、列表等，然后在需要使用它们的地方继承即可。这样可以统一样式，减少代码量，提高开发效率。
2. 响应式布局
使用 %（placeholder）可以定义一些基本的布局，如栅格系统、响应式布局等，然后在需要使用它们的地方继承即可。这样可以减少代码量，提高开发效率。
3. 主题切换
使用 %（placeholder）可以定义不同的主题样式，如深色主题、浅色主题等，然后在需要使用它们的地方继承即可。这样可以实现主题切换，提高用户体验。
总结
%（placeholder）是 SASS 中非常强大的一个特性，它可以让我们更加高效、灵活和易于维护地编写 CSS。使用 %（placeholder）可以复用样式、提高可维护性、减少 CSS 文件大小。在实际开发中，我们可以将 %（placeholder）应用于统一样式、响应式布局、主题切换等场景，从而提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6615188bd10417a22256615c