Seletores de Espaço Reservado

A Sass tem um tipo especial de seletor conhecido como “placeholder”. Ele se parece e comporta-se muito como um seletor de classe, mas começa com um % e não é incluído na saída de CSS. De fato, qualquer seletor complexo (aqueles entre as vírgulas) que ainda contém um seletor de espaço reservado não é incluído na CSS, nem qualquer regra de estilo cujos seletores todos contém espaços reservados.

SCSS Syntax

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

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

Sass Syntax

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


%strong-alert:hover
  color: red

CSS Output

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

Qual é o uso dum seletor que não é emitido? Ele ainda pode ser estendido! Ao contrário dos seletores de classe, os espaços reservados não atravancam a CSS se não forem estendidas e não exigem que os utilizadores duma biblioteca usem nomes de classe específicos para o seu HTML:

SCSS Syntax

%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;
}

Sass Syntax

%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 Output

.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;
}

Os seletores de espaço reservado são úteis quando escreves uma biblioteca de Sass onde cada regra de estilo pode ou não ser usada. Como uma boa regra, se estiveres a escrever uma folha de estilo só para a tua própria aplicação, muitas vezes é melhor apenas estender um seletor de classe se um estiver disponível.