Wie kann ich Variablen in CSS-Selektoren mit SCSS verwenden?

Variablen für CSS-Selektoren in SCSS verwenden

In SCSS sind Variablen ein leistungsstarkes Werkzeug zum Speichern dynamischer Werte und deren Wiederverwendung im gesamten Stylesheet. Die direkte Verwendung von Variablen in CSS-Selektoren ist jedoch nicht einfach.

Angenommen, Sie haben eine Variable $gutter auf 10 gesetzt. Möglicherweise möchten Sie sie in einem Selektor verwenden, um dynamisch einen Klassennamen basierend auf dem Wert von $ zu generieren Gutter.

Problem:

Wenn Sie versuchen, eine Variable direkt in einem Selektor zu verwenden, gehen Sie folgendermaßen vor:

<code class="scss">.grid+$gutter {
    background: red;
}</code>

Das Ergebnis ist eine ungültige CSS-Klasse. Die Ausgabe wird nicht wie erwartet .grid10 sein.

Lösung:

Um Variablen in CSS-Selektoren zu verwenden, müssen Sie #{$var-name} verwenden. Syntax. Der folgende Code zeigt, wie die Variable $gutter zum Generieren eines Klassennamens verwendet wird:

<code class="scss">$gutter: 10;

.grid#{$gutter} {
    background: red;
}</code>

Dadurch wird das folgende CSS generiert:

<code class="css">.grid10 {
    background: red;
}</code>

Beachten Sie, dass das # vor dem erforderlich ist Variablenname.

Zusätzlicher Hinweis:

Die #{$var-name}-Syntax kann auch verwendet werden, um Variablen in Zeichenfolgen einzuschließen, z. B. in URLs:

<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff')</code>

Das obige ist der detaillierte Inhalt vonWie kann ich Variablen in CSS-Selektoren mit SCSS verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!