Share
In diesem Artikel werden Variablen und Variablen näher untersucht Umfang in Sass. Der Gültigkeitsbereich einer Variablen beschreibt den Kontext, in dem sie definiert ist, und daher, wo sie zur Verwendung verfügbar ist.
Um zu beginnen, gehe ich darauf ein, welche Bereiche Sass unterstützt. Anschließend erläutere ich zwei nützliche Flags, mit denen Sie den Wert einer Variablen anpassen können. Zum Schluss werde ich die verfügbaren Funktionen kurz vorstellen, um zu prüfen, ob eine Variable existiert oder nicht.
Sass unterstützt zwei Arten von Variablen: lokal Variablen und global Variablen.
Standardmäßig werden alle außerhalb eines Selektors definierten Variablen als globale Variablen betrachtet. Das bedeutet, dass Sie von überall in unseren Stylesheets darauf zugreifen können. Hier ist zum Beispiel eine globale Variable:
$ bg-Farbe: grün;
Lokale Variablen sind dagegen diejenigen, die innerhalb eines Selektors deklariert werden. Später werden wir untersuchen, wie wir dieses Verhalten anpassen können. Aber jetzt sehen wir unser erstes Beispiel.
Hier definieren wir ein Mixin und dann das btn-bg-color Variable darin. Dies ist eine lokale Variable und ist daher nur für den Code in diesem Mixin sichtbar:
@mixin button-style $ btn-bg-color: hellblau; farbe: $ btn-bg-farbe;
Als Nächstes können wir das Mixin wie folgt aufrufen:
button @include-Button-Stil;
Das resultierende CSS:
Taste Farbe: hellblau;
Stellen Sie sich jedoch vor, wir möchten diese Variable (nicht das Mixin) auch in einem anderen Selektor verwenden:
.wrap background: $ btn-bg-color;
Dies würde uns den folgenden Fehler ergeben:
Nicht definierte Variable: "$ btn-bg-color".
Das war zu erwarten, richtig? Wir haben versucht, auf eine Mixin-Variable zuzugreifen, die lokal begrenzt ist. Keine Sorge, wie bereits erwähnt, werden wir dieses Problem in einem nächsten Abschnitt beheben.
Es ist auch erwähnenswert, dass, wenn wir eine Variable innerhalb eines Selektors deklarieren, jeder andere geschachtelte Selektor darauf zugreifen kann. Hier ist ein Beispiel:
.wrap $ bg-color: rot; &: after background: aufhellen ($ bg-color, 10%);
Dies kompiliert zu:
.wrap: after background: # ff3333;
Sehen Sie sich jedoch das Beispiel unten an, in dem wir eine Funktion definieren, und verwenden Sie diese Funktion dann zusammen mit einem verschachtelten Selektor:
@function my-function () $ Textfarbe: schwarz; @return $ Textfarbe zurückgeben; .wrap color: my-function (); &: after background: $ text-color;
Wenn wir versuchen, dies zu kompilieren, wird derselbe Fehler bereits zuvor besprochen. Wieder passiert das, weil wir nicht auf das zugreifen können Textfarbe Variable. Es ist nicht direkt innerhalb des übergeordneten Selektors definiert, aber innerhalb der Funktion, die unser Selektor aufruft.
Globale und lokale Variablen können denselben Namen haben. Um dieses Verhalten zu demonstrieren, arbeiten wir an einem vierten Beispiel:
$ Textfarbe: Tomate; @mixin button-style $ text-color: lime; Farbe: $ Textfarbe; @mixin link-style $ Textfarbe: schwarz; Farbe: $ Textfarbe;
Hier haben wir drei verschiedene Variablen definiert (Textfarbe) mit dem gleichen Namen. Die erste ist eine globale Variable, während die anderen beiden lokal sind.
Hier sind einige Stile, die sie verwenden:
button @include-Button-Stil; ein @include-Verknüpfungsstil; .wrap background: $ text-color;
Und das generierte CSS:
Taste Farbe: Kalk; eine Farbe: schwarz; .wrap Hintergrund: Tomate;
War es das, was du erwartet hast??
Beachten Sie, dass wir diese Stile nur sehen können, wenn wir mit der aktuellen Version von Sass (3.4) kompilieren. Angenommen, wir verwenden Sass 3.3, würde unsere CSS-Ausgabe folgendermaßen aussehen:
Taste Farbe: Kalk; eine Farbe: schwarz; .wrap Hintergrund: Schwarz;
Beachten Sie den Unterschied in der Hintergrundfarbe des .wickeln Wähler. Dies geschieht, weil gemäß den früheren Sass-Versionen (wie bei LibSass) der Wert einer globalen Variablen (z. Textfarbe), dies ist der neue (globale) Wert der Variablen. In unserem Beispiel hängen die kompilierten Stile von der Reihenfolge ab, in der wir die Variable und die Mixins deklarieren.
Accentsconagua
Standard FlaggeMit diesem Flag können wir den Wert einer Variablen festlegen, falls diese noch nicht gesetzt wurde oder der aktuelle Wert ist Null (als nicht zugewiesen behandelt). Um besser zu erklären, wie wir es in einem realen Szenario nutzen können, nehmen wir an, wir haben ein Projekt mit der folgenden Struktur:
Projektname / ├──… ├── css / └── └── app.css └── scss / ├── _config.scss ├── _variables.scss ├── _mixins.scss └── app.scss
Das app.scss Datei sieht so aus:
@import "config"; @import "Variablen"; @import "mixins"; button @include-Button-Stil; // weitere Stile
Lassen Sie uns den Inhalt der Teildateien sehen.
Erstens, die variables.scss Datei enthält unsere Variablen:
$ btn-bg-color: hellblau! default; $ btn-bg-color-hover: dunkler ($ btn-bg-color, 5%); // mehr Variablen
Beachten Sie die Standard Flagge, die der btn-bg-color Variable.
Zweitens die mixins.scss Datei enthält unsere Mixins:
@mixin button-style ($ bg-color: $ btn-bg-color, $ bg-color-hover: $ btn-bg-color-hover) Hintergrundfarbe: $ bg-color; // weitere Stile &: hover Hintergrundfarbe: $ bg-color-hover; // weitere Stile // weitere Mixins
Dann wird das generiert app.css Datei wird wie folgt sein:
Taste Farbe: hellblau; Taste: hover Hintergrundfarbe: # 99cfe0;
Daher sind unsere Schaltflächen mit Standardstilen ausgestattet. Nehmen wir jedoch an, wir möchten die Möglichkeit haben, sie durch Anwendung unserer benutzerdefinierten Werte zu überschreiben. Dazu können wir die gewünschten (Standard-) Variablen im neu zuordnen config.scss Teildatei:
$ btn-bg-Farbe: Schokolade; // mehr Variablen
Setzen Sie den Wert dieser Variablen auf Schokolade führt dazu, dass der entsprechende Wert ignoriert wird (hellblau) das das erhalten hat Standard Flagge. Daher ändert sich das generierte CSS, wie wir unten sehen können:
Taste Farbe: Schokolade; Taste: hover Hintergrundfarbe: # bc5e1b;
Hinweis: falls wir das nicht hinzugefügt haben Standard Flagge an die btn-bg-color variabel wäre unser CSS aufgrund der Kaskadierung von CSS wie folgt:
Taste Farbe: hellblau; // Hover-Stile
global FlaggeDieses zweite Flag hilft uns, den Gültigkeitsbereich einer lokalen Variablen zu ändern.
Erinnern Sie sich an den Fehler, den wir in unserem ersten Beispiel gesehen haben? Nun, das ist passiert, weil wir versucht haben, die btn-bg-color Variable in der .wickeln Wähler. Ändern Sie unser Beispiel, um dieses neue Flag aufzunehmen. Hier sind die neuen Stile:
@mixin button-style $ btn-bg-color: hellblau! global; farbe: $ btn-bg-farbe; button @include button-style; .wrap background: $ btn-bg-color;
Wie Sie unten sehen können, wird das CSS dank dieses Flag ohne Fehler kompiliert:
Taste Farbe: hellblau; .wrap Hintergrund: Hellblau;
Das global flag ist nützlich, bedenken Sie jedoch, dass es nicht immer sinnvoll ist, den Gültigkeitsbereich einer Variablen zu ändern.
Sass bietet zwei Introspektionsfunktionen zum Testen, ob eine Variable vorhanden ist oder nicht. Wir können die verwenden Variable existiert und / oder globale Variable existiert Funktionen, um zu überprüfen, ob unsere lokalen und / oder globalen Variablen vorhanden sind.
Im Folgenden finden Sie einen häufigen Anwendungsfall, in dem wir eine Variable definieren, die den absoluten Pfad zu einer Google-Schriftart enthält. Dann importieren wir diese Schriftart in unseren Stylesheets, jedoch nur, wenn die entsprechende Variable instanziiert wurde.
$ google-font: "http://fonts.googleapis.com/css?family=Alegreya"; @if (global-variable-exists (google-font)) @import url ($ google-font);
Das Ergebnis:
@import url ("http://fonts.googleapis.com/css?family=Alegreya");In diesem Artikel habe ich Ihnen das Konzept des variablen Geltungsbereichs in Sass vorgestellt. Um die Dinge klarer zu machen, haben wir uns verschiedene Beispiele angesehen, sodass Sie hoffentlich ein gutes Verständnis dafür haben, wie der Geltungsbereich funktioniert. Sie finden alle Beispiele dieses Artikels in dieser SassMeister-Übersicht und können sich gerne Fragen stellen, die Sie in den Kommentaren haben könnten!
