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?

Kjør SQL-kode i nettleseren din med SQLPad

Utviklingen av skybaserte IDEer gjør det enkelt å kode fra hvor som helst. Med cloud IDEs kan du lære å bygge nettsteder uten noen kodende programvare i det hele tatt!Og med nettleserversjoner kan du til og med begynne å kjøre mer dynamiske koder som database SQL. Den gratis SQLPad webappen er et flott verktøy for alle som praktiserer SQL eller ofte teste kodestykker .For å

(Tekniske og design tips)

Dropbox Pro er nå Dropbox Plus. Hva du trenger å vite

Ganske nylig besluttet Dropbox å gi nytt navn til Dropbox Pro-alternativet til "Dropbox Plus" . Selv om endringen i navnet sannsynligvis ikke ville påvirke de som er nye for Dropbox, kan langtidss brukere av cloud storage systemets premium-tilbud bli forvirret av denne navneendringen. Så her er tre ting du trenger å vite om Dropbox Plus. Dr

(Tekniske og design tips)