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!