Share
In deze tutorial ga ik je door een tool leiden met de naam Myth. Mythe is een alternatieve CSS-preprocessor die, in tegenstelling tot Sass of LESS, geen eigen syntaxis gebruikt. In plaats daarvan gebruikt Myth de "toekomstige" CSS-syntaxis zoals gespecificeerd in het werkconcept. Denk aan Myth zoals de afbeeldingvulling waarmee we de HTML5 kunnen gebruiken
"CSS zoals het was voorgesteld.
Voordat we Myth kunnen gebruiken, moeten we eerst een aantal dingen instellen. Laten we beginnen!
Mythe is een Node.js-pakket waarmee het op verschillende platforms kan werken. U moet er daarom voor zorgen dat zowel Node.js als NPM (Node Package Manager) op uw systeem is geïnstalleerd. Ter bevestiging start u Terminal of Command Prompt en typt u node -v && npm -v, als volgt:
Dit geeft aan dat Node.js en NPM zijn geïnstalleerd.Met deze opdracht moet de versie van Node.js en NPM worden geretourneerd, zoals hierboven wordt weergegeven, anders moet u ze installeren voordat u verder gaat. NPM heeft een korte screencast gegeven om u door het proces te begeleiden. Je kunt ook onze vorige series en cursussen volgen om te onderzoeken waar Node.js voor staat.
Nu, aangenomen dat je Node.js en NPM hebt ingesteld, kun je beginnen met het installeren van Myth met de volgende opdracht:
npm install -g mythe
De -g De parameter die we hebben toegevoegd, zal de Myth-bibliotheek installeren wereldwijd, waarmee Myth overal toegankelijk is, binnen elke directory op ons systeem.
Als je klaar bent, heb je toegang tot de mythe commando. hardlopen mythe - versie, toont u bijvoorbeeld de huidige versie van Myth die op uw systeem is geïnstalleerd.
De 
Accentsconagua
mythe opdracht werkt.Myth werkt met elke tekstgebaseerde bestandsextensie. Stijlbladen kunnen worden ingesteld .tekst, .css, of zelfs .mythe. Hier gebruik ik gewoon .css dus ik zal mijn code-editor niet hoeven te configureren om de code te kunnen weergeven met de juiste syntax-highlightende kleuren.
Voer de volgende opdracht uit, mythe --watch bouwen / app.css app.css om wijzigingen in de stylesheet te controleren in de /bouwen map en compileer deze in een overeenkomstig bestand.
Het stylesheet zal worden gecompileerd naar app.css in de hoofdmap.We zijn allemaal klaar om Myth te gebruiken!
Myth is in wezen een CSS-preprocessor waarmee we nieuwe CSS-syntaxis kunnen schrijven (die we in de toekomst waarschijnlijk gestandaardiseerd zullen zien te worden) door deze te compileren in het browser-compatibele CSS-formaat van vandaag. Myth-ondersteuning omvat het gebruik van CSS-variabelen, CSS-kleurmanipulatie en een aantal CSS-technieken die op dit moment gedeeltelijk of niet uniform worden ondersteund, zoals de :: placeholder pseudo-klasse en calc ().
Het gebruik van variabelen helpt ons aanzienlijk om stylesheets te behouden, en is mogelijk de belangrijkste reden waarom CSS-preprocessors in de eerste plaats zo goed werden geadopteerd. Desalniettemin zullen variabelen naar CSS komen als een native feature. Volgens de laatste Working Draft zouden we double dash gebruiken -- om een variabele te definiëren in plaats van de var- voorvoegsel zoals vermeld in een eerdere versie:
: root / ** [vroege versie en verouderd] * / var-color-primary: # 000; var-color-secondary: #fff; / ** [laatste versie] * / --color-primary: # 000; --color-secondary: #fff;
De :wortel pseudo-klasse selector verwijst naar het root-element van het markup-document. In het geval van HTML verwijst dit naar de element, in SVG zou het de . Omdat het rootelement het hoogste niveau van een document is, zetten we onze variabelen in de :wortel zorgt ervoor dat ze toegankelijk zijn in stijlregels binnen het stylesheet. U kunt het bereik van de variabele beperken door binnen een specifiekere selector te declareren.
We gebruiken het nieuwe var () functie om een variabele toe te passen in een stijlregel, bijvoorbeeld:
: root --color-primary: # 000; --color-secondary: #fff; h1, h2, h3 kleur: var (- kleur secundair); .panel background-color: var (- color-primary); kleur: var (- kleur secundair);
Dit voorbeeld geeft ons de volgende uitvoer (zoals je misschien had verwacht):
h1, h2, h3 color: #fff; .paneel achtergrondkleur: # 000; kleur: #fff;
Waarden in variabelen kunnen alles zijn - een kleur, een tekenreeks, een lengte, zelfs een wiskundige bewerking met behulp van de CSS calc () functie. Waarden in de variabele kunnen ook opnieuw worden gebruikt of worden overgenomen in overeenstemming met de CSS-cascaderegel. Hieronder bepalen we bijvoorbeeld het lijnhoogte waarde op basis van de voorgaande variabele.
: root --font-size-base: 16px; --line-height-base: calc (16px + 10); p font-size: var (- font-size-base); regelhoogte: var (- line-height-base);
Dit geeft ons:
p font-size: 16px; regelhoogte: 26px;
Een browser die standaard CSS-variabelen ondersteunt, is momenteel Firefox (zoek de volledige lijst op CanIUse.com).
De kleurmanipulatiefunctie geeft ons de mogelijkheid om kleuren intuïtiever te veranderen; het is niet nodig om de kleurenkiezer te onthouden of te goochelen om de juiste kleur te kiezen. Dit is gebruikelijk met CSS-preprocessors, maar kleur() (deel van de CSS Color mod Level 4) stelt ons in staat om kleuren te veranderen in gewone CSS. Deze nieuwe functie werkt door de kleur samen met een zogenaamde op te geven kleur-regelaar:
element achtergrondkleur: kleur ();
Kleurregelaars die Myth ondersteunt zijn onder meer:
lichtheid(), om de lichtheid van de gegeven kleur te wijzigen.witheid(), om de witte intensiteit van de gegeven kleur te wijzigen.zwartheid(), gelijkwaardig aan witheid(), behalve dat het de zwarte intensiteit wijzigt.verzadiging(), om de kleurverzadiging aan te passentint() , om een lichtere kleur te produceren door de opgegeven kleur met wit te mengen.schaduw() , om een donkerdere kleur te produceren door de gegeven kleur met zwart te mengen.Het volgende voorbeeld wordt verlicht #ccc (donkergrijs) met 20%.
p kleur: kleur (#ccc lichtheid (20%));
... die compileert in:
p kleur: rgb (51, 51, 51);
Als alternatief kunt u de kleur ook door een variabele leiden, zoals zo, wat ons dezelfde output zal geven:
: root --color-primary: #ccc; p color: color (var (- color-primary) lightness (20%));
kleur() is een functie die zeer nuttig zal zijn wanneer gebruikt in combinatie met de CSS3 lineaire gradiënt om verloopkleuren te bepalen, bijvoorbeeld:
.knop background: lineair verloop (naar beneden, var (- color-primary), kleur (var (- color-primary) shade (10%))); ;
De tekenvariabele eigendom is iets anders dat we kunnen gebruiken in Myth. tekenvariabele is daadwerkelijk aanwezig in CSS sinds CSS1 met slechts twee geaccepteerde waarden, normaal en small-caps. In CSS3, onderdeel van de CSS Fonts Module, de tekenvariabele eigendom is uitgebreid met meer geaccepteerde waarden, evenals specifieke eigenschappen toevoegingen zoals tekenvariabele-oost-Aziatische waarmee we variaties van Chinese glyphs kunnen selecteren, vereenvoudigd of traditioneel.
Laten we proberen alle letters binnen een kop in kleine hoofdletters te veranderen:
h1 font-variant: all-small-caps;
Myth zal deze code compileren in:
p -webkit-font-feature-settings: "smcp", "c2sc"; -moz-font-feature-instellingen: "smcp", "c2sc"; font-feature-instellingen: "smcp", "c2sc"; lettertype-variant: all-small-caps;
De all-small-caps waarde dwingt alle personages, inclusief kleine letters en hoofdletters, in kleine hoofdletters. Houd daar echter rekening mee all-small-caps zal alleen effect hebben in bepaalde lettertypefamilies die versies met een klein kapitaal van elke glyph leveren, zoals Helvetica, Arial en Lucida Grande. Waar kleine kapjes niet worden ondersteund, retourneert de glyph "onbekend":
Met dank aan afbeelding: Typography.comFirefox is op dit moment de enige browser met degelijke ondersteuning voor de tekenvariabele eigendom. Veel van de waarden, behalve de small-caps (aanwezig sinds CSS1) zal mislukken in andere browsers, inclusief Chrome en Safari. (zie de volledige compatibiliteitslijst in CanIUse.com).
Myth bevat ook Autoprefixer waarmee het browser-voorvoegsels voor bepaalde eigenschappen kan invoegen. Ga naar de Github-repo om meer CSS-functies te vinden die het ondersteunt. Er is ook een plugin voor Grunt en Gulp om tegemoet te komen aan uw workflow.
Ten slotte is Myth een CSS-preprocessor voor iedereen die op de grens van internet leeft. Maar of u besluit Myth te gebruiken als uw standaard CSS-tool of niet, we kunnen concluderen dat het een handvol nieuwe, spannende CSS-functies vertoont die het web in de toekomst een veel betere plaats zullen maken.
