SASS是一种CSS预处理器，用于提高CSS编写的效率。SASS的一个重要功能是占位符选择器（placeholder），它可以让我们编写更简洁，可重复使用的样式。
占位符选择器是什么？
占位符选择器是以%符号开头的选择器，类似于CSS中的类选择器，但不与任何元素相匹配。SASS编译器不会将占位符选择器编译到CSS中，它只在SASS中存在，等待被继承。
以下是一个简单的占位符选择器示例：
%base-color {
color: #333;
font-size: 14px;
}
.title {
@extend %base-color;
}上述代码中，我们定义了一个名为base-color的占位符选择器，它包括了两个属性：颜色和字体大小。我们可以通过@extend将它应用到.title类中，这意味着.title类会继承base-color的样式。
占位符选择器的优点
相对于普通的类选择器，占位符选择器有很多优点。
可重复使用的样式
占位符选择器可以定义一个通用的样式，然后用@extend将它应用到多个选择器中。这样，我们就可以避免编写重复的样式，提高CSS代码重用率。
更少的代码
占位符选择器的另一个优点是它可以减少CSS文件的大小。如果我们想要给多个元素应用相同的样式，就无需在CSS中编写多个类选择器，只需定义一个占位符选择器。
可维护性更高的代码
使用占位符选择器可以让CSS代码更易于维护。如果我们需要修改样式，只需要修改占位符选择器的定义，这样所有继承该占位符选择器的选择器都会自动更新。另外，占位符选择器可以让代码更有意义、更易于理解。
占位符选择器的使用技巧
不要随便使用占位符选择器
虽然占位符选择器有很多优点，但并不是所有时候都适合使用。如果我们在页面中只用了一次某个样式，那么定义一个占位符选择器就没有必要了，这会增加CSS文件的大小。
另外，使用占位符选择器可能会带来一些性能问题。如果我们在一个页面中大量使用占位符选择器，会导致编译后的CSS文件变得很大，加载时间变慢。因此，我们需要权衡代码重用性和文件大小的平衡，根据实际情况决定是否使用占位符选择器。
不要滥用@extend
虽然@extend可以让我们更灵活地继承占位符选择器的样式，但过度使用@extend可能会导致多个选择器共享同样的样式，使代码变得难以维护。
因此，我们应该只在必要时使用@extend，不要用它来“强制”共享样式。此外，应该尽量避免跨越不同定义块的继承，因为这可能会导致继承的样式无法预测和维护。
使用占位符选择器和普通类选择器之间的选择
在决定使用占位符选择器还是普通类选择器之前，需要考虑几个因素。首先，占位符选择器适用于需要重复使用的样式，而普通类选择器适用于只需要在单个元素上使用的样式。
其次，由于占位符选择器的样式只在使用@extend时才会被编译到CSS中，因此如果我们需要给一个元素应用特定的样式，那么普通类选择器更适合。
最后，需要考虑文件大小和性能问题。如果我们在一个页面中有大量相似的样式，那么使用占位符选择器可以减少代码重复和文件大小。但如果占位符被大量使用，可能会导致编译后的CSS文件变得很大。
示例代码
-- -------------------- ---- ------- -- -------- ------- - -------- ------------- -------- --- ----- ------ ----- ----------------- -------- -------------- ---- ---------- ----- - -- ------ ------------- - ------- -------- - -- ------ ---------------- - ------- -------- ----------------- -------- - -- -------- ----------- - ---------- ----- ------------ ---- --------------- ---- - -- ------ ------ - ------- ------------ ------------ ----- - -- ------ --------- - ------- ------------ ------ ----- -
上述代码中，我们定义了两个占位符选择器：button和large-text。button表示一个通用的按钮样式，large-text表示一个通用的大字号样式。然后，我们使用@extend将这些样式应用到.login-button、.register-button、.title和.subtitle这些类选择器中。
在应用button样式时，我们给.register-button选择器设置了一个特定的背景色。在应用large-text样式时，我们给.title选择器设置了一个特定的字体加粗。
结论
在SASS中使用占位符选择器是一种增强CSS编写效率，提高代码可重用性的方法。但占位符选择器并不适用于所有情况，需要根据具体情况决定是否使用它们。同时，我们需要注意使用@extend时的注意事项，以确保代码易于维护和性能表现良好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670109820bef792019b0a579