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?

Facebook ruller ut en kurert innholdsfunksjon kalt "Samlinger"

Etter uker med å bli grillet for den mulige rollen den spilte under den amerikanske presidentvalget, gir Facebook seg opp for å frigjøre en ny funksjon som en del av selskapets innsats for å bekjempe falske nyheter : Samlinger.Funksjonen er ganske mye identisk med Snapchatà ¢ s Discover section. Saml

(Tekniske og design tips)

Slik tilpasser du Visual Studio Code

Visual Studio Code, Microsofts nye åpen kildekoden editor gir utviklere mange fantastiske funksjoner som betydelig letter prosessen med kildekoden redigering . Dessuten sørger Visual Studio-koden for at brukerne ikke kjeder seg når de jobber med det, slik at de kan tilpasse flere deler av utseendet, for eksempel farger, fonter, mellomrom og tekstformatering, akkurat som mange funksjoner, slik som som linting og validaton regler .I

(Tekniske og design tips)