Share
Så langt har jeg skrevet syv Sass-biblioteker. De fleste av dem er bare en superset av funksjoner som kan inkluderes da brukes i prosjektene dine for å gi deg mer strøm over koden.
For eksempel er SassyLists en samling av funksjoner for å manipulere Sass-lister. De hjelper deg med å reversere en liste, sette inn et element på en bestemt indeks, skjære en liste mellom to indekser og så videre.
SassyLists kan importeres som Compass Extension, men jeg har lagt merke til at utviklere bare vil bruke en veldig spesifikk funksjon fra SassyLists slik at de kopierer / limer inn i deres kodebase. Problemet er at de ikke alltid tar hensyn til avhengigheter (for eksempel andre funksjoner).
Jeg bestemte meg for å begynne å jobbe med en avhengighetskontroller. Ideen er ganske enkel: hver funksjon med avhengighet vil først løpe gjennom avhengighetskontrollen; hvis sistnevnte oppdager at noen funksjoner mangler, advarer den utvikleren om at funksjonen ikke vil kunne kjøre riktig.
Avhengighetscheckeren er en enkel funksjon som godtar et ubegrenset antall argumenter (obligatoriske funksjoner navn).
@function missing-avhengigheter ($ funksjoner ...) // Sjekk av avhengigheter
Med dette bruker vi funksjons eksisterer () funksjon, introdusert i Sass 3.3, som kontrollerer eksistensen av en gitt funksjon i det globale omfanget.
Merk: Sass 3.3 tilbyr også -mixinen-eksisterer (), variabel eksisterer () og global-variabel finnes ().
@function missing-avhengigheter ($ funksjoner ...) @each $ funksjon i $ funksjoner @if ikke funksjon-eksisterer ($ funksjon) @return true; @return false;
Hvis det for en eller annen grunn ikke eksisterer en funksjon i omfanget, da manglende-avhengig avkastning ekte. Hvis alle funksjonene er i orden, så er det ingen manglende avhengigheter, slik at den kommer tilbakefalsk.
Du vil derfor bruke den slik:
// @requires my-function // @requires my-other-function @function dummy () @if manglende avhengigheter (min funksjon, min-andre-funksjonen) @warn "Ups! Mangler noen funksjoner for" dummy '! "; @return null; // 'dummy'-funksjonens kjernen, // åpenbart trenger' min-funksjon 'og' min-andre-funksjonen 'til å fungere.
Så det er ganske kult.
Det ville være enda bedre hvis vi kunne identifisere hvilken funksjonen mangler, så utvikleren vet hva han skal gjøre for å fikse problemet. Også å måtte skrive advarselen hver gang er litt irriterende, slik at vi kunne flytte det til manglende-avhengig funksjon.
Ideen er ikke så annerledes enn hva vi tidligere har gjort. Forskjellen er at vi nå vil lagre navnet på manglende funksjoner i stedet for å returnere direkte. Deretter, hvis det mangler funksjoner, vil vi kaste en advarsel til utvikleren, og til slutt returnere en boolsk som vi gjorde tidligere.
@function missing-avhengigheter ($ funksjoner ...) $ manglende avhengigheter: (); @each $ funksjon i $ funksjoner @if ikke funksjon-eksisterer ($ funksjon) $ manglende avhengigheter: legge til ($ manglende avhengigheter, $ funksjon, komma); @ lengde ($ manglende avhengigheter)> 0 @warn "Unmet avhengigheter! Følgende funksjoner er påkrevd: # $ missing-avhengigheter."; @return lengde ($ manglende avhengigheter)! = 0;
Som du kan se, er det ikke mye mer komplekst enn vår tidligere versjon. Plus, måten å bruke den er enda enklere:
@function dummy () @if missing-avhengigheter (min funksjon, min-andre-funksjonen) @return null; // 'dummy'-funksjonens kjernen, // åpenbart trenger' min-funksjon 'og' min-andre-funksjonen 'til å fungere.
Se? Vi kan grøfte @varsle direktivet, men hvis det mangler en eller flere funksjoner, vil utvikleren bli bedt om:
Unmet avhengigheter! Følgende funksjoner er påkrevd: min funksjon, min-andre-funksjonen.
Det største problemet jeg kan se med denne funksjonen er at du trenger manglende-avhengig funksjon! På dette tidspunktet er avhengighetskontrollen i utgangspunktet en avhengighet ... Du ser ironien.
Dette er fordi manglende avhengigheter (...) blir behandlet som en streng i situasjoner hvor manglende-avhengig refererer ikke til noen funksjoner, og en streng evaluerer alltid til ekte. Så når du gjør @if manglende avhengigheter (...), du gjør det effektivt @if streng, som alltid er sant, så vil du alltid ende opp med å møte denne tilstanden.
For å unngå dette, er det et smart arbeid rundt. I stedet for å bare gjøre @if manglende avhengigheter (...), vi kunne gjøre @if manglende avhengigheter (...) == true. I Sass, == er som === på andre språk, noe som betyr at det ikke bare kontrollerer verdien, men også typen.
@function dummy () @if missing-avhengigheter (min funksjon, min-andre-funksjonen) == true @return null; // 'dummy'-funksjonens kjernen, // åpenbart trenger' min-funksjon 'og' min-andre-funksjonen 'til å fungere.
Hvis funksjonen ikke eksisterer, så blir det som en streng som vi så tidligere. Mens en streng evalueres til ekte, det er ikke strengt lik ekte, fordi det er en string skriv, ikke en bool type.
Så på dette tidspunktet hvis manglende-avhengig funksjonen eksisterer ikke, du vil ikke matche tilstanden, slik at funksjonen kan kjøre normalt (selv om krasj hvis det mangler en avhengighet et sted i koden). Som er kult, fordi vi bare forbedrer ting uten å bryte dem.
Et annet problem med denne funksjonen er at det bare kontrollerer for manglende funksjoner, og ikke mixins eller globale variabler. Når det er sagt, er dette lett å gjøre ved å justere avhengighetscheckerkoden.
Hva om hvert argument passert til funksjonen kan være en liste over to elementer, med typen avhengighet som et første argument (enten funksjon, mixin eller variabel), og navnet på avhengigheten som en andre? For eksempel:
manglende avhengigheter (funksjon min-funksjon, variabel my-cool-variabel);
Hvis vi er mer sannsynlige å bruke funksjoner som avhengigheter, kan vi gjøre funksjon standard, slik at den forrige samtalen ville se slik ut:
manglende avhengigheter (min-funksjon, variabel my-cool-variabel);
I utgangspunktet er dette som å spørre om funksjonen skal kontrolleres my-funksjon eksisterer, og variabelen my-cool-variabel eksisterer fordi de er nødvendige for en gitt oppgave. Klar så langt?
La oss nå gå videre til koden. Vi kan bruke anrop() funksjon, å ringe TYPE - eksisterer (NAME). Alt annet er bare det samme som tidligere.
Accentsconagua
@funksjon manglende avhengigheter ($ avhengigheter ...) $ manglende avhengigheter: (); @each $ avhengighet i $ avhengigheter $ type: "funksjon"; // Default type dependence @if lengde ($ dependency) == 2 $ type: nth ($ avhengighet, 1); $ type: if (index ("function" "mixin" "variable", $ type), $ type, "funksjon"); $ avhengighet: nth ($ avhengighet, 2); @ ikke ringe ("# $ type -eksister", $ avhengighet) $ manglende avhengigheter: legge til ($ manglende avhengigheter, $ avhengighet, komma); @ lengde ($ manglende avhengigheter)> 0 @warn "Unmet avhengigheter! Følgende avhengigheter kreves: # $ missing-avhengigheter."; @return $ missing-avhengigheter! = 0; Ganske kul, heh? Dette gjør koden litt mer kompleks, så hvis du ikke sannsynligvis har forskjellige typer avhengigheter (som ikke er tilfelle med SassyLists), foreslår jeg at du holder deg til den første versjonen vi så.
Merk: Du vil kanskje automatisk slå en variabel skriv inn global-variabel for å ringe global-variabel finnes, fordi det er sannsynlig at en nødvendig variabel er en global en.
Det er ganske mye det folkens. Tydeligvis er dette ikke en daglig Sass-funksjon. Men jeg tror at i mange tilfeller, spesielt når man bygger biblioteker, rammer og utvidelser, kan slike tips komme til nytte. Gi meg beskjed om hva du synes i kommentarene!
