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?

Møt Niles, Slack er veldig egen chatassistent

Tilbake da vi først dekket Hangouts Chat, nevnte vi "@meet", tjenestens egen botassistent . Som det viser seg, er Hangouts Chat ikke den eneste som har en bot som Slack har en, og navnet heter Niles.Tilgjengelig som tillegg for Slack, er Niles en chatassistent som opererer innenfor Slack selv.

(Tekniske og design tips)

Du kan nå laste opp bilder til Instagram via mobilwebsiden

Når du legger inn et bilde på Instagram-kontoen din via mobilenheten, trenger ikke lenger Instagram-appen å bli installert på nevnte enhet. Hvordan kan du spørre? Vel, Instagram lar deg nå laste opp bildene dine til tjenesten direkte fra selve mobilwebsiden .Måten denne funksjonen fungerer på, er ganske enkel . Alt du

(Tekniske og design tips)