no.hideout-lastation.com
Paradis For Designere Og Utviklere


Myte - Skrive CSS of the Future

CSS har introdusert en rekke nye funksjoner som CSS Gradients, Shadows, Border Radius og Animation som alle kan oppnås rent med CSS. Det er også flere funksjoner som ennå ikke skal implementeres på grunn av at nettleserstøtten for CSS-variabler og CSS calc() -funksjonene er slett. Men hvis du ikke kan vente på fremtiden, la oss sjekke ut Myte.

Myte, i motsetning til andre forprosessorer som oppfinner sin egen syntaks, bruker samme syntaks som standardspesifikasjonen . Du kan bruke variabler, utføre matematiske eller fargebehandlinger, og skrive nye CSS-egenskaper i sin offisielle form. Målet er å tillate utviklere å skrive rent CSS, samtidig som de også kan benytte fremtidssentral syntaks, akkurat nå.

Starter

For å komme i gang må vi installere Myth binær for å kunne kompilere den til gjeldende CSS-standard. Det er ikke en GUI-applikasjon som Codekit eller Koala som støtter Myte på tidspunktet for skriving, så dette er den eneste måten å kompilere Myte i nettleser-kompatibelt CSS-format .

Skriv inn følgende kommando i Terminal:

 npm installere -g myte 

Du kan da bruke denne kommandoen nedenfor, for eksempel å kompilere source.css i output.css .

 myte source.css output.css 

Eller skriv dette for å overvåke source.css og kompilere det til output.css for hver endring.

 myte - watch source.css output.css 

Myte introduserer ikke en ny utvidelse. Det fungerer med .css som vist ovenfor.

Skriver CSS med Myte

Myte presenterer heller ikke proprietære funksjoner og regler som de andre CSS-forprosessorer, så du bør kunne bli vant til Myte nesten umiddelbart. Det er som vanlig CSS.

variabler

La oss starte med variabler. I CSS er en variabel deklarert, slik som:

 : root {varelengde: 10px; var-farge: # 000; } .class {bakgrunnsfarge: var (farge); bredde: var (lengde); } 

Myte kompilerer denne koden i nettleser-kompatibelt format:

 .class {bakgrunnsfarge: # 000; bredde: 20px; } 

Du kan se vår tidligere artikkel om Bruke CSS-variabler for mer informasjon.

Matematiske operasjoner

Som nevnt, kan vi også utføre matematiske operasjoner med den nye CSS3 calc() -funksjonen. Vi har også dekket denne funksjonen i vår tidligere artikkel: Bruke CSS3 Calc Function.

La oss forlenge vårt første eksempel med det:

 : root {varelengde: 10px; var-farge: # 000; } .class {bakgrunnsfarge: var (farge); bredde: calc (var (lengde) / 2); } 

Myte samler ovennevnte koder til:

 .class {bakgrunnsfarge: # 000; bredde: 10px; } 

Fargejusteringer

Myte støtter også noen fargoperasjoner eller justeringer som i LESS eller Sass. En ny standardfunksjon for den foreslås å bli inkludert i CSS-spesifisert color() - inkludert et sett med fargekonfigurerende funksjoner som tint(), shade() og blend() bare å nevne noen.

Nedenfor er et eksempel: Vi øker bakgrunnsfargens lyshet med 80% og reduserer grensefarge med 50% .

 : root {varelengde: 20px; var-svart: # 000; var-hvit: #fff; } .class {bakgrunnsfarge: farge (var (svart) lyshet (+ 80%)); grense: var (grense bredde) fargen (var (hvit) lyshet (- 50%)); bredde: calc (var (lengde) / 2); } 

Den koden vil produsere:

 .class {bakgrunnsfarge: rgb (204, 204, 204); grense: 2px solid rgb (128, 128, 128); bredde: 10px; } 

Autoprefixer

Myte vil også automatisk legge til leverandør prefiks til CSS egenskaper. Vi kan bare skrive, for eksempel CSS Box Shadow, på denne måten:

 .class {box-shadow: 2px 1px 0px var (svart); } 

Utgangen er:

 .class {-webkit-box-shadow: 2px 1px 0px # 000; bokseskygge: 2px 1px 0px # 000; } 

Endelig tanke

Jeg elsker ideen om myte. Med det kan vi skrive ren CSS av fremtiden i dag uten å bekymre oss om nettleserstøtte. Og siden det bruker standard syntaks, senere når alle nettlesere har implementert det (som standard), trenger vi ikke å omskrive all koden. Jeg tror jeg skal begynne å bruke den i alle fremtidige prosjekter. Hva med deg? Vil du adoptere det samme?

20 Kreative Valentinsdagskort Du ønsker at du mottok

20 Kreative Valentinsdagskort Du ønsker at du mottok

Valentinsperioden ligger rett rundt hjørnet, og hvis du ikke er bøyd på å få gaver som blomster, sjokolade, kaker eller aromatiske stearinlys til den bedre halvdelen i år, bør du vurdere å lage dette årets gave som i hånden .Ikke kast øynene dine - hvis du ikke er en fan av vanlige gaver du kan få på et hvilket som helst kjøpesenter (eller til og med online), er håndlagde gaver veien å gå . En av de enkles

(Tekniske og design tips)

CSS Floats forklart i 5 spørsmål

CSS Floats forklart i 5 spørsmål

CSS "Floats" (flytende elementer) er enkle å bruke, men en gang brukt, har effekten på elementene rundt den noen ganger uforutsigbar. Hvis du noen gang har kommet over problemer med å forsvinne nærliggende elementer eller flyter som pokker ut som en sår tommel, bekymre deg ikke mer.Dette innlegget dekker fem grunnleggende spørsmål som vil hjelpe deg til å bli ekspert på flytende elementer.Hvilke e

(Tekniske og design tips)