SASS 中的内容占位符 % placeholder 详解
SASS 是一种基于 CSS 的预编译语言，它能够大幅度提高 CSS 的可读性和可维护性，其中的内容占位符 % placeholder 是 SASS 中非常重要的一个特性。它可以方便我们在编写 CSS 样式时进行代码复用，并且能够帮助我们减少代码嵌套层次，提高代码的可读性和可维护性。
- 什么是内容占位符？
在 SASS 中，内容占位符是以 % 开头的选择器，它不会输出到 CSS 文件中，只能被 extend 所继承，因此也称为 extend-only 选择器。它类似于一个抽象的 CSS 类，可以作为其他选择器的基础，却不会被编译成实际的 CSS 样式。
- 如何使用内容占位符？
使用内容占位符有两个步骤。首先，要定义一个内容占位符，可以使用 % 然后给它取一个名字：
%my-placeholder {
/* some styles */
}接着，我们可以使用 @extend 来将这个占位符应用到其他选择器上，其他选择器就可以继承该占位符的样式了：
.my-class {
@extend %my-placeholder;
/* some additional styles */
}- 内容占位符的优势
内容占位符与普通的 CSS 类继承相比，有以下几个优点：
继承规则更为严格——只能被继承，不能直接使用，效果更为单一。
不会输出到 CSS 文件——内容占位符只能用来继承，并不会编译成实际的 CSS 样式，因此可以减小 CSS 文件的体积。
可以减少嵌套层次——使用内容占位符可以减少选择器的嵌套层数，提高代码的可读性和可维护性。
模块化——通过将样式放到占位符中，可以实现样式的模块化和复用，提高代码的可维护性和可扩展性。
示例代码
下面是一个使用内容占位符的示例代码：
%button {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #333;
color: #fff;
}
.primary {
@extend %button;
background-color: #007bff;
}
.secondary {
@extend %button;
background-color: #6c757d;
}
.success {
@extend %button;
background-color: #28a745;
}
.warning {
@extend %button;
background-color: #ffc107;
}
.danger {
@extend %button;
background-color: #dc3545;
}在这个示例中，我们定义了一个内容占位符 %button，然后在 primary、secondary、success、warning 和 danger 五个类中使用了 extend 来继承该占位符的样式。这样做可以大大减少代码的重复，提高代码的可读性和可维护性。
- 总结
内容占位符是 Sass 中非常重要的一个特性，它可以方便我们进行样式复用和模块化，提高代码的可读性和可维护性。与普通的 CSS 类相比，使用内容占位符可以减少代码的嵌套层次，使代码结构更为清晰。在实际开发中，我们应该合理地使用内容占位符，为自己的代码质量提升加分！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b615beadd4f0e0ffec801b