Share
In dit artikel gaan we dieper in op variabelen en variabelen strekking in Sass. Het bereik van een variabele beschrijft de context waarin deze is gedefinieerd en dus waar deze beschikbaar is voor gebruik.
Om te beginnen zal ik bespreken welke scopes Sass ondersteunt. Vervolgens zal ik twee nuttige vlaggen uitleggen die we kunnen gebruiken om de waarde van een variabele aan te passen. Ten slotte zal ik kort de beschikbare functies presenteren om te controleren of een variabele bestaat of niet.
Sass ondersteunt twee soorten variabelen: lokaal variabelen en globaal variabelen.
Standaard worden alle variabelen die buiten een selector zijn gedefinieerd als globale variabelen beschouwd. Dat betekent dat ze overal in onze stylesheets kunnen worden geopend. Hier is bijvoorbeeld een globale variabele:
$ bg-kleur: groen;
Aan de andere kant zijn lokale variabelen die welke in een selector worden gedeclareerd. Later zullen we onderzoeken hoe we dat gedrag kunnen aanpassen. Maar voor nu, laten we ons eerste voorbeeld zien.
Hier definiëren we een mixin en dan de btn-bg-color variabele erin. Dit is een lokale variabele en is daarom alleen zichtbaar voor de code in die mixin:
@mixin-knopstijl $ btn-bg-color: lichtblauw; kleur: $ btn-bg-color;
Vervolgens kunnen we de mixin als volgt bellen:
knop @include button-style;
De resulterende CSS:
knop kleur: lichtblauw;
Stel je echter voor dat we deze variabele (niet de mixin) ook in een andere selector willen gebruiken:
.wrap background: $ btn-bg-color;
Dit zou ons de volgende foutmelding geven:
Ongedefinieerde variabele: "$ btn-bg-color".
Dat was te verwachten, toch? We hebben geprobeerd toegang te krijgen tot een mixin-variabele, die lokaal wordt gebruikt. U hoeft zich echter geen zorgen te maken, zoals hierboven vermeld, zullen we dit probleem in een volgend gedeelte oplossen.
Het is ook de moeite waard om te vermelden dat als we een variabele binnen een selector declareren, elke andere geneste selector er toegang toe heeft. Hier is een voorbeeld:
.wrap $ bg-color: rood; &: na background: lighten ($ bg-color, 10%);
Dit compileert naar:
.wrap: after background: # ff3333;
Bekijk echter het onderstaande voorbeeld waarin we een functie definiëren en gebruik die functie samen met een geneste selector:
@function my-function () $ text-color: black; @return $ text-color; .wrap color: my-function (); &: na achtergrond: $ tekstkleur;
Als we dit proberen te compileren, krijgen we dezelfde fout als eerder besproken. Nogmaals, dat gebeurt omdat we geen toegang hebben tot de tekst kleur variabel. Dat is het niet direct gedefinieerd in de bovenliggende selector, maar binnen de functie die onze selector oproept.
Globale en lokale variabelen kunnen dezelfde naam hebben. Om dat gedrag te demonstreren, werken we aan een vierde voorbeeld:
$ tekstkleur: tomaat; @mixin-knopstijl $ tekstkleur: limoen; kleur: $ tekstkleur; @mixin-linkstijl $ tekstkleur: zwart; kleur: $ tekstkleur;
Hier hebben we drie verschillende variabelen gedefinieerd (tekst kleur) met dezelfde naam. De eerste is een globale variabele, terwijl de andere twee lokaal zijn.
Hier zijn enkele stijlen die er gebruik van maken:
knop @include button-style; een @inclusief linkstijl; .wrap background: $ text-color;
En de gegenereerde CSS:
knop kleur: limoen; a color: black; .wrap background: tomaat;
Is dat wat je verwachtte??
Houd er rekening mee dat we deze stijlen alleen zullen zien als we compileren met de huidige versie van Sass (3.4). Stel dat we Sass 3.3 gebruiken, onze CSS-uitvoer ziet er bijvoorbeeld als volgt uit:
knop kleur: limoen; a color: black; .wrap background: black;
Let op het verschil in de achtergrondkleur van de .wikkelen selector. Dit gebeurt omdat, volgens de eerdere Sass-versies (hetzelfde voor LibSass), als we lokaal de waarde van een globale variabele (bijv.. tekst kleur), dit is de nieuwe (globale) waarde van de variabele. Dus, in ons voorbeeld zijn de gecompileerde stijlen afhankelijk van de volgorde waarin we de variabele en de mixins declareren.
Accentsconagua
standaard vlagMet deze vlag kunnen we de waarde van een variabele instellen voor het geval deze nog niet is ingesteld of de huidige waarde is nul (behandeld als niet-toegewezen). Om beter uit te leggen hoe we er in een echt scenario van kunnen profiteren, laten we veronderstellen dat we een project hebben met de volgende structuur:
Project-Name / ├── ... ├── css / │ └── app.css └── scss / ├── _config.scss ├── _variables.scss ├── _mixins.scss └── app.scss
De app.scss bestand ziet er als volgt uit:
@import "config"; @import "variabelen"; @import "mixins"; knop @include button-style; // meer stijlen
Laten we de inhoud van de deelbestanden bekijken.
Ten eerste, de variables.scss bestand bevat onze variabelen:
$ btn-bg-color: lightblue! standaard; $ btn-bg-color-hover: donkerder ($ btn-bg-color, 5%); // meer variabelen
Let op de standaard vlag toegewezen aan de btn-bg-color veranderlijk.
Ten tweede, de mixins.scss bestand bevat onze mixins:
@mixin-knopstijl ($ bg-kleur: $ btn-bg-color, $ bg-color-hover: $ btn-bg-color-hover) background-color: $ bg-color; // meer stijlen &: hover background-color: $ bg-color-hover; // meer stijlen // meer mixins
Vervolgens wordt het gegenereerd app.css bestand zal als volgt zijn:
knop kleur: lichtblauw; knop: hover background-color: # 99cfe0;
Onze knoppen zijn dus voorzien van standaardstijlen. Maar laten we veronderstellen dat we de optie willen hebben om ze te overschrijven door onze aangepaste waarden toe te passen. Om dit te doen, kunnen we de gewenste (standaard) variabelen opnieuw toewijzen in de config.scss gedeeltelijk bestand:
$ btn-bg-color: chocolade; // meer variabelen
De waarde van deze variabele instellen op chocolade zal resulteren in het negeren van de bijbehorende waarde (lichtblauw) die het standaard vlag. Daarom verandert de gegenereerde CSS zoals we hieronder kunnen zien:
knop kleur: chocolade; knop: hover background-color: # bc5e1b;
Notitie: voor het geval we het niet hebben toegevoegd standaard vlag naar de btn-bg-color variabele, zou onze CSS, als gevolg van de cascadering van CSS, als volgt zijn:
knop kleur: lichtblauw; // zweefstijlen
globaal vlagMet deze tweede vlag kunnen we de reikwijdte van een lokale variabele wijzigen.
Herinner je je de fout die we in ons eerste voorbeeld zagen? Welnu, dat gebeurde omdat we probeerden het te gebruiken btn-bg-color variabele in de .wikkelen selector. Laten we ons voorbeeld aanpassen om deze nieuwe vlag op te nemen. Dit zijn de nieuwe stijlen:
@mixin-knopstijl $ btn-bg-color: lightblue! global; kleur: $ btn-bg-color; knop @include button-style; .wrap background: $ btn-bg-color;
Zoals u hieronder kunt zien, compileert de CSS, dankzij deze vlag, zonder fouten:
knop kleur: lichtblauw; .wrap achtergrond: lichtblauw;
De globaal vlag is handig, maar houd er rekening mee dat het niet altijd een goede gewoonte is om het bereik van een variabele te wijzigen.
Sass biedt twee introspectie-functies om te testen of een variabele bestaat of niet. We kunnen de gebruiken variabele bestaat en / of global-variabele bestaat functies om te controleren of onze lokale en / of globale variabelen respectievelijk bestaan.
Dit is bijvoorbeeld een standaardgebruiksgeval waarbij we een variabele definiëren die het absolute pad naar een Google-lettertype bevat. Vervolgens kiezen we ervoor om dat lettertype in onze stylesheets te importeren, maar alleen als de relevante variabele is geïnstantieerd.
$ google-font: "http://fonts.googleapis.com/css?family=Alegreya"; @if (global-variable-exists (google-font)) @import url ($ google-font);
Het resultaat:
@import url ("http://fonts.googleapis.com/css?family=Alegreya");In dit artikel heb ik je in Sass laten kennismaken met het concept van variabele reikwijdte. Om de zaken duidelijker te maken, hebben we verschillende voorbeelden bekeken, dus hopelijk heb je nu een goed begrip van hoe de scope werkt. Je kunt alle voorbeelden van dit artikel vinden in deze SassMeister-kern en je kunt gerust vragen stellen in de opmerkingen.!
