Share
I denna handledning kommer jag att gå igenom ett verktyg som heter Myth. Myt är en alternativ CSS preprocessor som, till skillnad från Sass eller LESS, inte använder proprietär syntax. I stället antar Myt "framtida" CSS-syntax enligt vad som anges i Working Draft. Tänk på Myt som bildfyllningen som tillåter oss att använda HTML5
"CSS som det föreställdes.
Innan vi kan använda Myt måste vi först installera ett par saker. Låt oss börja!
Myt är ett Node.js-paket som gör det möjligt att arbeta på olika plattformar. Du måste därför se till att du har Node.js och NPM (Node Package Manager) installerat i ditt system. För att verifiera, starta Terminal eller Kommandotolken och skriv nod -v && npm -v, som följer:
Detta indikerar att vi har Node.js och NPM installerat.Detta kommando bör returnera versionen av Node.js och NPM som visas ovan, annars måste du installera dem innan du fortsätter vidare. NPM har tillhandahållit en kort skärmdump för att vägleda dig genom processen. Du kan också följa våra tidigare serier och kurser för att gräva in vad Node.js handlar om.
Om du antar att du har Node.js och NPM, kan du börja installera Myth med följande kommando:
npm installera -g myt
De -g parameter som vi lagt till kommer att installera Myth Library globalt, som tillåter Myt att vara tillgänglig var som helst, i någon katalog på vårt system.
När du har gjort det kommer du få tillgång till myt kommando. Löpning myt - version, till exempel visar dig den nuvarande versionen av Myt installerad på ditt system.
De 
Accentsconagua
myt kommandot fungerar.Myt fungerar med alla textbaserade filtillägg. Stycken kan ställas in .Text, .css, eller ens .myt. Här använder jag helt enkelt .css så jag behöver inte konfigurera min kodredigerare för att göra koden med ordentliga syntaxfärger.
Kör följande kommando, myt - watch build / app.css app.css att övervaka ändringar inom stilarket i /bygga mapp och kompilera den i en motsvarande fil.
Stilarkretet kommer att sammanställas till app.css i rotkatalogen.Vi är alla färdiga att använda Myt!
Myt är i huvudsak en CSS-förprocessor som gör det möjligt för oss att skriva en ny CSS-syntax (som vi kan förvänta oss att standardisera i framtiden) sammanställa den i dagens CSS-format för webbläsare. Mytstöd innefattar användningen av CSS-variabler, CSS-färgmanipulation och ett par CSS-tekniker som för närvarande är delvis eller inte enhetligt stödda, såsom :: platshållare pseudoklass och calc ().
Användningen av variabler hjälper oss avsevärt att behålla stilark, och är kanske den främsta orsaken till varför CSS-förprocessorer blev så vältagna i första hand. Ändå kommer variabler att komma till CSS som en inbyggd funktion. Enligt det senaste arbetsförslaget skulle vi använda dubbla bindestreck -- att definiera en variabel istället för var- prefix som anges i ett tidigare utkast:
: root / ** [tidig version och avskriven] * / var-färg-primär: # 000; var-färg-sekundär: #fff; / ** [senaste versionen] * / --färg-primär: # 000; - färg sekundär: #fff;
De :rot pseudoklassväljare hänvisar till grundelementet i markupdokumentet. I fallet med HTML hänvisas det till element i SVG skulle det vara . Eftersom rotelementet är den högsta nivån på ett dokument, sätter vi våra variabler i :rot tillåter dem att vara tillgängliga i alla stilregler inom stilarket. Du kan begränsa variabelns räckvidd genom att deklarera inom en mer specifik väljare.
Vi använder det nya var () funktion för att tillämpa en variabel i en stilregel, till exempel:
: root --färg-primär: # 000; - färg sekundär: #fff; h1, h2, h3 färg: var (- färg-sekundär); .panel bakgrundsfärg: var (- färg-primär); färg: var (- färg-sekundär);
Det här exemplet ger oss följande utdata (som du kanske har förväntat):
h1, h2, h3 färg: #fff; .panel bakgrundsfärg: # 000; färg: #fff;
Värden i variabler kan vara allt-en färg, en sträng, en längd, till och med en matematisk operation med hjälp av CSS calc () fungera. Värdena i variabeln kan också återanvändas eller ärva i enlighet med CSS-kaskadregeln. Nedan bestämmer vi till exempel radavstånd värde baserat på föregående variabel.
: root --font-size-base: 16px; - linjehöjd-bas: calc (16px + 10); p font-size: var (- font-size-base); linjehöjd: var (- linjehöjd-bas);
Detta ger oss:
p font-size: 16px; linjehöjd: 26px;
En webbläsare som stödjer CSS-variabel för närvarande är Firefox (hitta den fullständiga listan på CanIUse.com).
Färgmanipuleringsfunktionen ger oss möjlighet att ändra färger mer intuitivt; Det finns inget behov av att memorera eller jonglera färgplockaren bara för att välja rätt färg. Detta är vanlig praxis med CSS preprocessorer, men Färg() (del av CSS Color mod Level 4) tillåter oss att ändra färger i vanlig CSS. Denna nya funktion fungerar genom att ange färgen tillsammans med en så kallad färg-justerare:
element bakgrundsfärg: färg ();
Färgjusterare som Myth stödjer inkluderar:
lätthet(), att modifiera ljusheten i den givna färgen.vithet(), för att modifiera den vita färgens intensitet.svärta(), Liknande vithet(), förutom att den modifierar den svarta intensiteten.mättnad(), för att modifiera färgmättnadennyans() , för att producera en ljusare färg genom att blanda den givna färgen med vit.skugga() , för att producera en mörkare färg genom att blanda den givna färgen med svart.Följande exempel kommer att lysa #ccc (mörkgrå) med 20%.
p färg: färg (#ccc ljushet (20%));
... som sammanställer sig i:
p färg: rgb (51, 51, 51);
Alternativt kan du också vidarebefordra färgen genom en variabel, som så, vilket ger oss samma resultat:
: root --color-primary: #ccc; p färg: färg (var (- färg-primär) ljushet (20%));
Färg() är en funktion som kommer att vara till stor hjälp när den används tillsammans med CSS3 linjär-gradient för att bestämma gradientfärger, till exempel:
.knapp bakgrund: linjär gradient (till botten, var (- färg-primär), färg (var (- färg-primär) nyans (10%))); ;
De font-variant egendom är något annat vi kan använda i myter. font-variant har faktiskt varit närvarande i CSS sedan CSS1 med endast två accepterade värden, vanligt och små bokstäver. I CSS3, en del av CSS Fonts Module, är font-variant egendom har utökats med mer accepterade värden samt specifika egenskapstillägg, t.ex. font-variant-öst-asiatiska som tillåter oss att välja variationer av kinesiska glyfer, förenklad eller traditionell.
Låt oss försöka vrida alla bokstäver inom en rubrik i små huvudstäder:
h1 font-variant: all-small-caps;
Myt kommer att kompilera denna kod i:
p -webkit-font-feature-inställningar: "smcp", "c2sc"; -moz-font-feature-inställningar: "smcp", "c2sc"; font-feature-inställningar: "smcp", "c2sc"; font variant: all-small-caps;
De all-small-caps värdet tvingar alla tecken, inklusive små och stora bokstäver, till små huvudstäder. Men kom ihåg att all-small-caps kommer bara att påverka speciella typsnittfamiljer som tillhandahåller småkapitalversioner av varje glyf, till exempel Helvetica, Arial och Lucida Grande. Om små kepsar inte stöds kommer glyfen att returnera "okänt":
Bild med tillstånd: Typography.comFirefox är för närvarande den enda webbläsaren med anständigt stöd för font-variant fast egendom. Många av värdena, förutom små bokstäver (närvarande sedan CSS1) misslyckas i andra webbläsare, inklusive Chrome och Safari. (se fullständig kompatibilitetslista i CanIUse.com).
Myt innehåller även Autoprefixer som låter den infoga webbläsarprefix för särskilda egenskaper. Gå vidare till Github repo för att hitta fler CSS-funktioner som den stöder. Det finns också ett plugin för Grunt and Gulp för att tillgodose ditt arbetsflöde.
Slutligen är Myt en CSS preprocessor för alla som lever på webbens blödande kant. Men om du bestämmer dig för att använda Myt som ditt vanliga CSS-verktyg eller inte, kan vi dra slutsatsen att det visar en handfull nya spännande CSS-funktioner som gör webben till en mycket bättre plats i framtiden.
