Share
I denne artikkelen vil vi se nærmere på variabler og variabler omfang i Sass. Omfanget av en variabel beskriver sammenhengen der den er definert og derfor hvor den er tilgjengelig for bruk.
For å begynne, vil jeg dekke hvilke mål Sass støtter. Deretter skal jeg forklare to nyttige flagg vi kan bruke til å tilpasse verdien av en variabel. Til slutt vil jeg kort presentere de tilgjengelige funksjonene for å sjekke om en variabel eksisterer eller ikke.
Sass støtter to typer variabler: lokal variabler og global variabler.
Som standard betraktes alle variabler som er definert utenfor en hvilken som helst velger, globale variabler. Det betyr at de kan nås fra hvor som helst i stilarkene våre. For eksempel, her er en global variabel:
$ bg-farge: grønn;
På den annen side er lokale variabler de som deklareres inne i en velger. Senere undersøker vi hvordan vi kan tilpasse den atferden. Men for nå, la oss se vårt første eksempel.
Her definerer vi en mixin og deretter btn-BG-farge variabel innenfor den. Dette er en lokal variabel, og er derfor kun synlig for koden i den blandingen:
@mixin knappestil $ btn-bg-farge: lyseblå; farge: $ btn-bg-farge;
Deretter kan vi ringe mixin som følger:
knapp @include knappestil;
Den resulterende CSS:
knapp farge: lyseblå;
Imidlertid, at vi også vil bruke denne variabelen (ikke mixin) i en annen velger:
.pakke inn bakgrunn: $ btn-bg-color;
Dette ville gi oss følgende feil:
Udefinert variabel: "$ btn-bg-color".
Det var å forvente, ikke sant? Vi prøvde å få tilgang til en mixin-variabel, som er lokalt scoped. Ikke bekymre deg, men som nevnt ovenfor, løser vi dette problemet i en kommende seksjon.
Det er også verdt å nevne at hvis vi erklærer en variabel i en velger, kan enhver annen nestet velger få tilgang til den. Her er et eksempel:
.pakke inn $ bg-farge: rødt; &: etter bakgrunn: lys ($ bg-farge, 10%);
Dette kompilerer til:
.pakke inn: etter bakgrunn: # ff3333;
Se imidlertid på eksemplet nedenfor hvor vi definerer en funksjon, og bruk den funksjonen sammen med en nestet velger:
@funksjon min funksjon () $ tekstfarge: svart; @return $ tekst-farge; .wrap color: my-function (); &: etter bakgrunn: $ tekstfarge;
Hvis vi prøver å kompilere dette, får vi den samme feilen som ble diskutert før. Igjen, det skjer fordi vi ikke har tilgang til tekst-farge variabel. Det er det ikke direkte definert i foreldrevelgeren, men inne i funksjonen som vinkelen vår ringer til.
Globale og lokale variabler kan ha samme navn. For å demonstrere atferden, jobber vi med et fjerde eksempel:
$ tekstfarge: tomat; @mixin knappestil $ tekstfarge: lime; farge: $ tekstfarge; @mixin link-stil $ tekstfarge: svart; farge: $ tekstfarge;
Her har vi definert tre forskjellige variabler (tekst-farge) med samme navn. Den første er en global variabel, mens de to andre er lokale.
Her er noen stiler som bruker dem:
knapp @include knappestil; en @include link-stil; .wrap background: $ text-color;
Og den genererte CSS:
knapp farge: lime; en farge: svart; .wrap bakgrunn: tomat;
Er det det du hadde forventet?
Husk at vi ikke vil se disse stilene med mindre vi kompilerer med den nåværende versjonen av Sass (3.4). Hvis vi for eksempel antar at vi bruker Sass 3.3, vil vår CSS-utgang se slik ut:
knapp farge: lime; en farge: svart; .wrap bakgrunn: svart;
Legg merke til forskjellen i bakgrunnsfargen til .pakke inn velgeren. Dette skjer fordi i henhold til tidligere Sass-versjoner (samme for LibSass), hvis vi lokalt omdefinerer verdien av en global variabel (f.eks.. tekst-farge), vil dette være variabelenes nye (globale) verdi. Så, i vårt eksempel er de sammensatte stilene avhengig av rekkefølgen vi erklærer variabelen og mixinene.
Accentsconagua
misligholde flaggDette flagget lar oss sette verdien av en variabel hvis den ikke allerede er angitt eller den nåværende verdien er null (behandlet som ikke tildelt). For å bedre forklare hvordan vi kan dra nytte av det i et reelt scenario, la oss anta at vi har et prosjekt med følgende struktur:
Prosjektnavn / ├── ... ├── css / │ └──app.css └──scss / ├── _config.scss ├── _variables.scss ├── _mixins.scss └── app.scss
De app.scss filen ser slik ut:
@import "config"; @import "variabler"; @import "mixins"; knapp @include knappestil; // flere stiler
La oss se innholdet i delfilene.
For det første, variables.scss filen inneholder våre variabler:
$ btn-bg-farge: lightblue! default; $ btn-bg-color-hover: mørkere ($ btn-bg-farge, 5%); // flere variabler
Legg merke til misligholde flagg tildelt til btn-BG-farge variabel.
For det andre, mixins.scss filen inneholder våre mixins:
@mixin-knappestil ($ bg-farge: $ btn-bg-farge, $ bg-fargepulver: $ btn-bg-fargepulver) bakgrunnsfarge: $ bg-farge; // flere stiler &: hover bakgrunnsfarger: $ bg-color-hover; // flere stiler // flere mixins
Deretter genereres den app.css filen vil være som følger:
knapp farge: lyseblå; -knappen: svever bakgrunnsfargen: # 99cfe0;
Så, våre knapper kommer med standard stiler. Men la oss anta at vi vil ha muligheten til å overskrive dem ved å bruke våre tilpassede verdier. For å gjøre dette kan vi tilordne de ønskede (standard) variablene i config.scss delvis fil:
$ btn-bg-farge: sjokolade; // flere variabler
Angir verdien av denne variabelen til sjokolade vil resultere i å ignorere den tilsvarende verdien (lyse blå) som har mottatt misligholde flagg. Derfor endrer den genererte CSS som vi ser nedenfor:
knapp farge: sjokolade; -knappen: svever bakgrunnsfargen: # bc5e1b;
Merk: i tilfelle vi ikke har lagt til misligholde flagg til btn-BG-farge variabel, vil vår CSS være, på grunn av CSSs cascading natur, som følger:
knapp farge: lyseblå; // svever stiler
global flaggDette andre flagget hjelper oss med å endre omfanget av en lokal variabel.
Husker du feilen vi så i vårt første eksempel? Vel, det skjedde fordi vi prøvde å bruke btn-BG-farge variabel i .pakke inn velgeren. La oss endre vårt eksempel for å inkludere dette nye flagget. Her er de nye stilene:
@mixin knappestil $ btn-bg-farge: lightblue! global; farge: $ btn-bg-farge; -knappen @include button-style; .wrap background: $ btn-bg-color;
Som du kan se nedenfor, takker du dette flagget, samler CSS uten feil:
knapp farge: lyseblå; .wrap bakgrunn: lightblue;
De global flagg er nyttig, men husk at det ikke alltid er god praksis å endre variabelens omfang.
Sass gir to introspeksjonsfunksjoner for å teste om en variabel eksisterer eller ikke. Vi kan bruke variabel eksisterer og / eller global-variabel finnes Fungerer for å sjekke om våre lokale og / eller globale variabler eksisterer henholdsvis.
For eksempel er det et vanlig brukstilfelle der vi definerer en variabel som inneholder den absolutte banen til en Google Font. Deretter velger vi å importere denne skrifttypen i stilarkene våre, men bare hvis den aktuelle variabelen har blitt instantiated.
$ google-font: "http://fonts.googleapis.com/css?family=Alegreya"; @if (global variabel-eksisterer (google-font)) @import url ($ google-font);
Resultatet:
@import url ("http://fonts.googleapis.com/css?family=Alegreya");I denne artikkelen introduserte jeg deg til begrepet variabelt omfang i Sass. For å gjøre ting klarere så vi på forskjellige eksempler, så forhåpentligvis har du nå en god forståelse av hvordan omfanget fungerer. Du kan finne alle eksemplene på denne artikkelen i denne SassMeisteren, og gjerne stille spørsmål du måtte ha i kommentarene.!
