SASS | 占位符选择器

在 SASS 中，我们可以使用占位符选择器来定义一个可重用的样式块，这种方式比使用类选择器 more 有效率，因为它不会产生额外的 CSS 代码，同时也方便维护和修改。

定义和使用

占位符选择器以 % 开头，后面跟选择器名称，如 %btn。在定义时，我们可以像定义类选择器一样定义样式：

%btn {
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

在使用时，我们通过 @extend 指令来继承占位符选择器定义的样式：

.btn {
  @extend %btn;
}

.btn-outline {
  @extend %btn;
  background-color: #fff;
  color: #007bff;
  border: 1px solid #007bff;
}

代码中，我们先定义了一个 %btn 占位符选择器，它包含了一些基本的按钮样式。然后我们定义了两个类选择器 .btn 和 .btn-outline，它们分别继承了 %btn 的样式，并进行了一些自定义的调整。

编译结果

使用占位符选择器能够减少编译出来的 CSS 代码的数量，因为它只生成被使用了的样式，而且在使用 @extend 继承占位符选择器时，不会产生复杂的层叠关系。

下面是代码经过编译后生成的 CSS 代码：

.btn,
.btn-outline {
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-outline {
  background-color: #fff;
  color: #007bff;
  border: 1px solid #007bff;
}

我们可以看到，编译出来的 CSS 代码中只包含了使用了的样式，而且没有产生额外的代码。

总结

占位符选择器是 SASS 中一个非常方便的特性，它能够减少编译出来的 CSS 代码的数量，提高性能，并且方便维护和修改。在项目中，我们可以尽量使用占位符选择器来定义样式，以提高代码的质量和效率。