佔位符選擇器

Sass 有一種特殊的選擇器，稱為「佔位符」。它的外觀和行為與類別選擇器非常相似，但它以 % 開頭，且不會包含在 CSS 輸出中。事實上，任何包含佔位符選擇器的複雜選擇器（逗號之間的選擇器）都不會包含在 CSS 中，任何其選擇器都包含佔位符的樣式規則也不會包含在 CSS 中。

Playground

SCSS 語法

.alert:hover, %strong-alert {
  font-weight: bold;
}

%strong-alert:hover {
  color: red;
}
Playground

Sass 語法

.alert:hover, %strong-alert
  font-weight: bold


%strong-alert:hover
  color: red

CSS 輸出

.alert:hover {
  font-weight: bold;
}

不會被輸出的選擇器有什麼用？它仍然可以被延伸！與類別選擇器不同，如果佔位符沒有被延伸，它們不會使 CSS 變得雜亂，而且它們也不會強制程式庫的使用者在 HTML 中使用特定的類別名稱。

Playground

SCSS 語法

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

.reset-buttons {
  @extend %toolbelt;
  color: #cddc39;
}
Playground

Sass 語法

%toolbelt
  box-sizing: border-box
  border-top: 1px rgba(#000, .12) solid
  padding: 16px 0
  width: 100%

  &:hover
    border: 2px rgba(#000, .5) solid

.action-buttons
  @extend %toolbelt
  color: #4285f4


.reset-buttons
  @extend %toolbelt
  color: #cddc39

CSS 輸出

.reset-buttons, .action-buttons {
  box-sizing: border-box;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
  padding: 16px 0;
  width: 100%;
}
.reset-buttons:hover, .action-buttons:hover {
  border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
  color: #4285f4;
}

.reset-buttons {
  color: #cddc39;
}

當編寫每個樣式規則都可能被使用或不被使用的 Sass 程式庫時，佔位符選擇器會很有用。根據經驗，如果您只是為自己的應用程式編寫樣式表，通常最好直接延伸類別選擇器（如果有的話）。