Förstå variabel räckvidd i Sass

I den här artikeln tar vi en djupare titt på variabler och variabler omfattning i Sass. Omfattningen av en variabel beskriver det sammanhang inom vilket det definieras och därmed det är tillgängligt för användning.

För att börja, täcker jag vilka omfattningar Sass stöder. Sedan ska jag förklara två användbara flaggor som vi kan använda för att anpassa värdet på en variabel. Slutligen presenterar jag korta tillgängliga funktioner för att kontrollera om en variabel finns eller ej.

Sass Variable Scope

Sass stöder två typer av variabler: lokal variabler och global variabler.

Som standard betraktas alla variabler som definieras utanför valfri väljare globala variabler. Det betyder att de kan nås från var som helst i våra stylesheets. Till exempel här är en global variabel:

$ bg-färg: grön;

Å andra sidan är lokala variabler de som deklareras inom en väljare. Senare undersöker vi hur vi kan anpassa det beteendet. Men för nu, låt oss se vårt första exempel.

Här definierar vi en mixin och sedan btn-bg-färg variabel inom den. Detta är en lokal variabel, och är därför endast synlig för koden i den mixin:

@mixin knappstil $ btn-bg-färg: ljusblå; färg: $ btn-bg-color;

Därefter kan vi ringa mixin enligt följande:

knappen @ include button-style;

Den resulterande CSS:

knapp färg: ljusblå;

Föreställ dig att vi också vill använda denna variabel (inte mixin) i en annan väljare:

.wrap background: $ btn-bg-color;

Detta skulle ge oss följande fel:

Odefinierad variabel: "$ btn-bg-color".

Det var att vänta, eller hur? Vi försökte komma åt en mixin-variabel, som är lokaliserad. Oroa dig inte, men som vi nämnde ovan kommer vi att åtgärda problemet i ett kommande avsnitt.

Nested Selectors

Det är också värt att nämna att om vi förklarar en variabel i en väljare, kan någon annan nestad väljare komma åt den. Här är ett exempel:

.wrap $ bg-color: red; &: efter bakgrund: ljusare ($ bg-färg, 10%);

Detta sammanställer till:

.wrap: efter background: # ff3333;

Men titta på exemplet nedan där vi definierar en funktion, använd sedan den funktionen tillsammans med en kapslad väljare:

@funktion min funktion () $ text-färg: svart; @return $ text-color;  .wrap color: my-function (); &: efter bakgrund: $ text-color;

Om vi försöker kompilera detta får vi samma fel som diskuterats tidigare. Det händer igen eftersom vi inte kan komma åt text färg variabel. Det är det inte direkt definierad inom moderväljaren, men inuti den funktion som vår väljare ringer.

Variable Names

Globala och lokala variabler kan ha samma namn. För att visa det beteendet arbetar vi med ett fjärde exempel:

$ textfärg: tomat; @mixin knappstil $ text-färg: lime; färg: $ text-color;  @mixin länkstil $ text-färg: svart; färg: $ text-color;

Här har vi definierat tre olika variabler (text färg) med samma namn. Den första är en global variabel, medan de andra två är lokala.

Här är några stilar som använder dem:

knappen @ include button-style;  en @include länkstil;  .wrap background: $ text-color;

Och den genererade CSS:

knapp färg: lime;  en färg: svart;  .wrap bakgrund: tomat;

Är det vad du förväntade dig?

Tänk på att vi inte kommer se dessa stilar om vi inte sammanställer med den aktuella versionen av Sass (3.4). Om vi antar att vi använder Sass 3.3, så skulle vår CSS-utgåva se ut så här:

knapp färg: lime;  en färg: svart;  .wrap background: black;

Notera skillnaden i bakgrundsfärgen på .slå in väljare. Detta händer därför att enligt de tidigare Sass-versionerna (samma för LibSass), om vi lokalt omdefinierar värdet av en global variabel (t.ex.. text färg), kommer detta att vara variabelns nya (globala) värde. Så, i vårt exempel beror de sammanställda stilerna på den ordning vi förklarar variabeln och mixins.

De `standard` flagga

Med denna flagg kan vi ange värdet för en variabel om det inte redan har ställts in eller dess nuvarande värde null (behandlad som otilldelad). För att bättre förklara hur vi kan utnyttja det i ett verkligt scenario, låt oss anta att vi har ett projekt med följande struktur:

Projekt-Namn / ├── ... ├── css / │ └── app.css └──scss / ├── _config.scss ├── _variables.scss ├── _mixins.scss └── app.scss

De app.scss filen ser så här ut:

@import "config"; @import "variabler"; @import "mixins"; knappen @ include button-style;  // fler stilar

Låt oss se innehållet i delfilerna.

För det första variables.scss filen innehåller våra variabler:

$ btn-bg-färg: lightblue! default; $ btn-bg-färg-svängare: mörkare ($ btn-bg-färg, 5%); // fler variabler

Lägg märke till standard flagga tilldelad till btn-bg-färg variabel.

För det andra mixins.scss filen innehåller våra mixins:

@mixin-knappstil ($ bg-färg: $ btn-bg-färg, $ bg-färghängare: $ btn-bg-färghängare) bakgrundsfärg: $ bg-färg; // fler stilar &: sväva bakgrundsfärg: $ bg-färg-hover; // fler stilar // fler mixins

Därefter genereras app.css filen kommer att vara enligt följande:

knapp färg: ljusblå;  -knappen: svep bakgrundsfärg: # 99cfe0;

Så, våra knappar kommer med standardstilar. Men låt oss anta att vi vill ha möjlighet att skriva över dem genom att tillämpa våra anpassade värden. För att göra detta kan vi omfördela de önskade (standard) variablerna i config.scss partiell fil:

$ btn-bg-färg: choklad; // fler variabler

Ställer värdet på denna variabel till choklad kommer att resultera i att man ignorerar motsvarande värde (ljusblå) som har mottagit standard flagga. Därför ändras den genererade CSS som vi kan se nedan:

knapp färg: choklad;  -knappen: svep bakgrundsfärg: # bc5e1b;

Notera: om vi inte har lagt till standard flagga till btn-bg-färg variabel, skulle vår CSS vara, på grund av CSSs cascading natur, enligt följande:

knapp färg: ljusblå;  // svängstilar

De `global` flagga

Den här andra flaggan hjälper oss att ändra omfattningen av en lokal variabel.

Kommer du ihåg det fel vi såg i vårt första exempel? Jo det hände för att vi försökte använda btn-bg-färg variabel i .slå in väljare. Låt oss ändra vårt exempel för att inkludera den här nya flaggan. Här är de nya stilarna:

@mixin knappstil $ btn-bg-color: lightblue! global; färg: $ btn-bg-color;  knappen @ include button-style;  .wrap background: $ btn-bg-color;

Som du kan se nedan, tack vare denna flagga, sammanställer CSS utan några fel:

knapp färg: ljusblå;  .wrap background: lightblue;

De global flaggan är användbar, men tänk på att det inte alltid är bra att ändra variabelns räckvidd.

Kontrollera om en variabel existerar

Sass har två introspektionsfunktioner för att testa om en variabel finns eller ej. Vi kan använda variabel-exists och / eller global variabel existerar Funktioner för att kontrollera om våra lokala och / eller globala variabler existerar.

Det här är till exempel ett vanligt fall där vi definierar en variabel som innehåller den absoluta sökvägen till en Google-teckensnitt. Då väljer vi att importera det tecknet i våra stylesheets, men endast om den relevanta variabeln har blivit instanserad.

$ google-typsnitt: "http://fonts.googleapis.com/css?family=Alegreya"; @if (globalt variabel-existerande (google-typsnitt)) @import url ($ google-typsnitt);

Resultatet:

@import url ("http://fonts.googleapis.com/css?family=Alegreya");

Slutsats

I denna artikel introducerade jag dig till begreppet variabelt räckvidd i Sass. För att göra saker tydligare såg vi på olika exempel, så förhoppningsvis har du nu en bra förståelse för hur omfattningen fungerar. Du hittar alla exemplen på den här artikeln i denna SassMeister och kan du ställa frågor som du kanske har i kommentarerna!

Webbdesign