Share
I denne opplæringen skal jeg gå gjennom et verktøy som heter Myte. Myte er en alternativ CSS preprocessor som, i motsetning til Sass eller LESS, ikke bruker proprietær syntaks. I stedet antar Myte "fremtidig" CSS-syntaks som angitt i Working Draft. Tenk på Myte som bildefyllingen som lar oss bruke HTML5
"CSS slik det var forestilt.
Før vi kan bruke Myte må vi først sette opp et par ting. La oss komme i gang!
Myte er en Node.js-pakke som gjør at den kan fungere på forskjellige plattformer. Du må derfor sørge for at du har Node.js og NPM (Node Package Manager) installert i systemet. For å bekrefte, start Terminal eller Kommandoprompt og skriv inn node -v && npm -v, som følger:
Dette indikerer at vi har Node.js og NPM installert.Denne kommandoen skal returnere versjonen av Node.js og NPM som vist ovenfor, ellers må du installere dem før du fortsetter videre. NPM har gitt en kort screencast for å veilede deg gjennom prosessen. Du kan også følge vår tidligere serie og kurs for å grave inn hva Node.js handler om.
Nå, forutsatt at du har Node.js og NPM satt opp, kan du begynne å installere Myth ved å bruke følgende kommando:
npm installere -g myte
De -g parameteren vi la til, vil installere Myth Library globalt, som gjør at Myte kan være tilgjengelig hvor som helst, innenfor hvilken som helst katalog på vårt system.
Når du har gjort det, får du tilgang til myte kommando. Løping myte - versjon, for eksempel vil vise deg den nåværende versjonen av Myte installert på systemet ditt.
De 
Accentsconagua
myte kommandoen fungerer.Myte arbeider med en tekstbasert filtypenavn. Stylesheets kan settes inn .tekst, .css, eller .myte. Her bruker jeg bare .css så jeg trenger ikke å konfigurere kodeditoren min for å gjengi koden med riktige syntaksfarger.
Kjør følgende kommando, myte - watch build / app.css app.css for å overvåke endringer i stilarket i /bygge mappe og kompilere den i en tilsvarende fil.
Stylesheetet blir kompilert til app.css i rotkatalogen.Vi er alle klare til å bruke Myte!
Myte er i hovedsak en CSS preprosessor som gjør at vi kan skrive ny CSS-syntaks (som vi kanskje regner med å bli standardisert i fremtiden) og kompilere den i dagens nettleser-kompatible CSS-format. Mytestøtte omfatter bruk av CSS-variabler, CSS-fargemanipulering og et par CSS-teknikker som for øyeblikket delvis eller ikke er jevnt støttet, for eksempel :: plassholder pseudoklasse og calc ().
Bruken av variabler hjelper oss betydelig til å opprettholde stilark, og er muligens den viktigste årsaken til hvorfor CSS preprosessorer ble så godt vedtatt i utgangspunktet. Likevel vil variabler komme til CSS som en innfødt funksjon. I henhold til det siste arbeidsprosjektet, ville vi bruke dobbelt dash -- å definere en variabel i stedet for Var- prefiks som angitt i et tidligere utkast:
: root / ** [tidlig versjon og utdatert] * / var-farge-primær: # 000; var-farge-sekundær: #fff; / ** [siste versjon] * / --farger-primær: # 000; --farge-sekundær: #fff;
De :rot pseudo-klassevelger refererer til rotelementet i markupdokumentet. I tilfelle av HTML, vil dette referere til element, i SVG ville det være . Siden rotelementet er det høyeste nivået av et dokument, setter vi variablene i :rot lar dem være tilgjengelige i alle stilregler innenfor stilarket. Du kan begrense omfanget av variabelen ved å erklære innen en mer spesifikk velger.
Vi bruker det nye var () funksjon for å bruke en variabel i en stilregel, for eksempel:
: root --color-primary: # 000; --farge-sekundær: #fff; h1, h2, h3 farge: var (- farge sekundær); .panel bakgrunnsfarge: var (- farge-primær); farge: var (- farge sekundær);
Dette eksempelet gir oss følgende utdata (som du kanskje har forventet):
h1, h2, h3 farge: #fff; .panel bakgrunnsfarge: # 000; farge: #fff;
Verdier i variabler kan være alt-en farge, en streng, en lengde, til og med en matematisk operasjon ved hjelp av CSS calc () funksjon. Verdier i variabelen kan også gjenbrukes eller arves i samsvar med CSS-kaskaderegelen. Nedenfor bestemmer vi for eksempel linjehøyde verdi basert på forrige variabel.
: root --font-size-base: 16px; - linje-høyde-base: calc (16px + 10); p font-size: var (- font-size-base); linjehøyde: var (- linjehøydebase);
Dette gir oss:
p skriftstørrelse: 16px; linjehøyde: 26px;
En nettleser som støtter CSS-variabel for tiden, er Firefox (finn den komplette listen på CanIUse.com).
Fargemanipuleringsfunksjonen gir oss muligheten til å endre farger mer intuitivt; Det er ikke nødvendig å huske eller sjonglere fargeplukeren bare for å velge riktig farge. Dette er vanlig praksis med CSS preprosessorer, men farge() (en del av CSS Color Mod Level 4) vil tillate oss å endre farger i vanlig CSS. Denne nye funksjonen fungerer ved å spesifisere fargen sammen med en såkalt fargejustering:
element bakgrunnsfarge: farge ();
Fargejustere som Myth-støtter inkluderer:
lyshet (), for å endre lysheten i den oppgitte fargen.hvithet (), for å endre den hvite intensiteten til den oppgitte fargen.mørke (), lik hvithet (), bortsett fra det endrer den svarte intensiteten.metning (), for å endre fargemetningentint () , å produsere en lettere farge ved å blande den oppgitte fargen med hvitt.skygge() , å produsere en mørkere farge ved å blande den oppgitte fargen med svart.Følgende eksempel lyser #ccc (mørkegrå) med 20%.
p farge: farge (#ccc lyshet (20%));
... som samler inn i:
p farge: rgb (51, 51, 51);
Alternativt kan du også sende fargen gjennom en variabel, slik som det, som gir oss samme utgang:
: root --color-primary: #ccc; p farge: farge (var (- farge-primær) lyshet (20%));
farge() er en funksjon som vil være sterkt nyttig når den brukes i forbindelse med CSS3 lineær-gradient for å bestemme gradientfarger, for eksempel:
.knapp bakgrunn: lineær gradient (til bunn, var (- farge-primær), farge (var (- farge-primær) nyanse (10%))); ;
De font-variant eiendom er noe annet vi kan bruke i myte. font-variant har faktisk vært til stede i CSS siden CSS1 med bare to aksepterte verdier, normal og små-caps. I CSS3, en del av CSS Fonts Module, er font-variant Egenskapen er utvidet med mer aksepterte verdier, samt spesifikke eiendomsutvidelser som font-variant-øst-asiatiske som tillater oss å velge variasjoner av kinesiske glyfer, forenklet eller tradisjonell.
La oss prøve å snu alle bokstavene i en overskrift til små hovedsteder:
h1 font-variant: all-small-caps;
Myte vil kompilere denne koden inn i:
p -webkit-font-feature-innstillinger: "smcp", "c2sc"; -moz-font-feature-innstillinger: "smcp", "c2sc"; font-feature-innstillinger: "smcp", "c2sc"; font-variant: all-small-caps;
De all-små-caps verdien vil tvinge alle tegnene, inkludert små og store bokstaver, til små bokstaver. Vær imidlertid oppmerksom på at all-små-caps vil bare påvirke bestemte skriftfamilier som gir småkapitalversjoner av hver glyph, som Helvetica, Arial og Lucida Grande. Hvor små kapper ikke støttes, vil glyfen returnere "ukjent":
Bilde høflighet: Typography.comFirefox er for øyeblikket den eneste nettleseren med anstendig støtte til font-variant eiendom. Mange av verdiene, bortsett fra små-caps (nåværende siden CSS1) vil mislykkes i andre nettlesere, inkludert Chrome og Safari. (se den komplette kompatibilitetslisten i CanIUse.com).
Myte inneholder også Autoprefixer som gjør det mulig å sette inn nettleserprefikser for bestemte egenskaper. Gå over til Github repo for å finne flere CSS-funksjoner som den støtter. Det er også et plugin for Grunt og Gulp for å imøtekomme arbeidsflyten din.
Til slutt, Myte er en CSS preprosessor for alle som bor på blødende kanten av nettet. Men om du bestemmer deg for å bruke Myte som det vanlige CSS-verktøyet eller ikke, kan vi konkludere med at det demonstrerer en håndfull nye spennende CSS-funksjoner som gjør nettet til et mye bedre sted i fremtiden..
