Eine Sass-Variable für einen Selektor verwenden

Nehmen wir an, Sie müssen einen bestimmten Selektor an mehreren Stellen in Ihrem Code verwenden. Das ist sicher nicht übermäßig üblich, aber es passiert eben. Wiederholter Code ist typischerweise eine Gelegenheit zur Abstraktion. Werte in Sass zu abstrahieren ist einfach, Selektoren sind da schon etwas kniffliger.

Eine Möglichkeit, dies zu tun, ist, Ihren Selektor als Variable zu erstellen. Hier ist ein Beispiel, das eine durch Kommas getrennte Liste von Selektoren ist

$selectors: "
  .module,
  body.alternate .module
";

Um dies zu verwenden, müssen Sie die Variable interpolieren, so:

#{$selectors} {
  background: red;
}

Das funktioniert auch mit Verschachtelung

.nested {
  #{$selectors} {
    background: red;
  }
}

Präfixierung

Eine Variable kann auch nur ein Teil eines Selektors sein, wie ein Präfix.

$prefix: css-tricks-;

.#{$prefix}button {
  padding: 0.5rem;
}

Sie könnten auch Verschachtelung verwenden, um Präfixe zu erstellen

.#{$prefix} {
  &module {
    padding: 1rem;
  } 
  &header {
    font-size: 110%;
  }
  &footer {
    font-size: 90%;
  }
}

Selektoren in einer Map

Vielleicht eignet sich Ihre Abstraktion für eine Schlüssel/Wert-Situation. Das ist in Sass eine Map.

$selectorMap: (
  selectorsFoo: ".module",
  selectorsBar: ".moodule-2"
);

Sie können sie einzeln verwenden, wie

#{map-get($selectorMap, selectorsFoo)} {
  padding: 1rem;
}

Oder durch sie iterieren

@each $selectorName, $actualSelector in $selectorMap {
  #{$actualSelector} {
    padding: 1rem;
  }
}

Beispiele

Siehe den Pen Sass Variables for Selectors von Chris Coyier (@chriscoyier) auf CodePen.