Variables Scoping in SASS

7

Angenommen, ich möchte einen globalen Wert für eine Variable definieren und ihn dann für bestimmte Selektoren überschreiben. Laut der SASS-Dokumentation sollte dies möglich sein.

  

Variablen sind nur innerhalb der Ebene der verschachtelten Selektoren verfügbar, in denen sie definiert sind. Wenn sie außerhalb von verschachtelten Selektoren definiert sind, sind sie überall verfügbar.

Logic würde dann angeben, dass "grün" und "rot" als Werte für $text-color nur innerhalb ihrer jeweiligen geschachtelten Selektoren verfügbar wären, und dass $text-color einen Wert von "blau" annehmen würde, wenn anderswo, z wie in .foo .

%Vor%

Dies ist jedoch nicht der Fall, und das obige SASS kompiliert zu:

%Vor%

Jede Hilfe, die das versteht, wäre, naja, hilfreich.

    
Chris Brauckmuller 30.10.2012, 15:12
quelle

2 Antworten

9

Dies liegt daran, dass, sobald Sie eine Variable global zuweisen, alle weiteren Zuweisungen an diese Variable auch global vorgenommen werden. Wenn du es danach lokal machen willst, könntest du $local-text-color: $text-color; und dann color: $local-text-color;

machen     
Andy 30.10.2012, 15:30
quelle
12

Dies ist eine alte Frage, aber ab Version 3.4.0 sind Variablen jetzt block-scoped, wenn sie nicht mit dem! global-Flag markiert sind.

Aus dem Änderungsprotokoll:

  

Alle Variablenzuordnungen, die sich nicht auf der obersten Ebene des Dokuments befinden, sind   jetzt standardmäßig lokal. Wenn es eine globale Variable mit dem gleichen gibt   Name wird nicht überschrieben, es sei denn, das! global-Flag wird verwendet.   Beispiel: $ var: value! Global wird $ var global zugewiesen.
  Dieses Verhalten kann mit Hilfe von
erkannt werden   Feature-Existiert (global-variable-shadowing).

Dies bedeutet, dass scss :

%Vor%

Erzeugt nun das folgende css :

%Vor%     
TxH 10.02.2015 21:04
quelle

Tags und Links