Mythe - CSS van de toekomst schrijven

CSS heeft een hele reeks nieuwe functies geïntroduceerd, zoals CSS Gradients, Shadows, Border Radius en Animation, die allemaal puur met CSS kunnen worden bereikt. Er zijn ook verschillende functies die nog moeten worden geïmplementeerd vanwege de ondersteuning van browsers voor CSS-variabelen en CSS calc() -functies. Maar als je niet echt kunt wachten op de toekomst, laten we eens kijken naar Myth.

Mythe gebruikt, in tegenstelling tot andere pre-processors die zijn eigen syntaxis uitvinden, dezelfde syntaxis als de standaardspec . U kunt variabelen gebruiken, wiskundige bewerkingen of kleurbewerkingen uitvoeren en nieuwe CSS-eigenschappen in de officiële vorm ervan schrijven. Het doel is om ontwikkelaars toe te staan ​​pure CSS te schrijven, terwijl ze nu ook syntaxis van de toekomststandaard kunnen gebruiken.

Ermee beginnen

Om te beginnen, moeten we Myth binary installeren om het te kunnen compileren met de huidige CSS-standaard. Er is geen GUI-toepassing zoals Codekit of Koala die Myth op het moment van schrijven ondersteunt, dus dit is de enige manier om Myth in browser-conform CSS-formaat te compileren .

Typ in Terminal de volgende opdracht:

 npm install -g mythe 

U kunt deze opdracht hieronder gebruiken om bijvoorbeeld source.css te compileren in output.css .

 mythe source.css output.css 

Of typ dit om de source.css te controleren en compileer deze naar output.css voor elke wijziging.

 mythe --watch source.css output.css 

Myth introduceert geen nieuwe extensie. Het werkt met .css zoals hierboven weergegeven.

CSS schrijven met Myth

Myth introduceert ook geen eigen functies en regels zoals de andere CSS Pre-processors, dus je zou bijna onmiddellijk aan Myth moeten wennen. Het is als gewone CSS.

Variabelen

Laten we beginnen met variabelen. In CSS wordt een variabele gedeclareerd, zoals zo:

 : root {var-length: 10px; var-kleur: # 000; } .klasse {achtergrondkleur: var (kleur); breedte: var (lengte); } 

Myth compileert deze code in browser-compatibel formaat:

 .klasse {achtergrondkleur: # 000; breedte: 20px; } 

U kunt verwijzen naar ons vorige artikel over CSS-variabelen gebruiken voor meer informatie.

Math Operations

Zoals vermeld, kunnen we ook wiskundige bewerkingen uitvoeren met de nieuwe CSS3 calc() -functie. We hebben deze functie ook behandeld in ons vorige artikel: CSS3 Calc-functie gebruiken.

Laten we ons eerste voorbeeld ermee uitbreiden:

 : root {var-length: 10px; var-kleur: # 000; } .klasse {achtergrondkleur: var (kleur); breedte: calc (var (lengte) / 2); } 

Myth compileert de bovenstaande codes in:

 .klasse {achtergrondkleur: # 000; breedte: 10px; } 

Kleuraanpassingen

Myth ondersteunt ook enkele kleurbewerkingen of aanpassingen zoals in LESS of Sass. Een nieuwe standaardfunctie ervoor wordt voorgesteld om te worden opgenomen in de color() CSS-specificatie color() - inclusief een reeks functies voor het aanpassen van kleuren zoals tint(), shade() en blend() om er maar een paar te noemen.

Hieronder een voorbeeld: we vergroten de lichtheid van de achtergrondkleur met 80% en verkleinen de randkleur met 50% .

 : root {var-length: 20px; var-zwart: # 000; var-wit: #fff; } .klasse {achtergrondkleur: kleur (var (zwart) lichtheid (+ 80%)); border: var (border-width) effen kleur (var (wit) lichtheid (- 50%)); breedte: calc (var (lengte) / 2); } 

Die code zal produceren:

 .klasse {achtergrondkleur: rgb (204, 204, 204); grens: 2px vaste rgb (128, 128, 128); breedte: 10px; } 

Autoprefixer

Myth voegt ook automatisch een leveranciersprefix toe aan CSS-eigenschappen. We kunnen bijvoorbeeld eenvoudig CSS Box Shadow schrijven, op deze manier:

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

De uitvoer is:

 .klasse {-webkit-box-shadow: 2px 1px 0px # 000; vakschaduw: 2px 1px 0px # 000; } 

Laatste gedachte

Ik hou van het idee van Mythe. Hiermee kunnen we vandaag pure CSS van de toekomst schrijven zonder ons zorgen te hoeven maken over browserondersteuning. En omdat het de standaardsyntaxis gebruikt, later als alle browsers het hebben geïmplementeerd (als de standaard), hoeven we niet alle code te herschrijven. Ik denk dat ik het ga gebruiken in elk van mijn toekomstige projecten. En jij dan? Ga je hetzelfde adopteren?

6 Essentiële (maar saaie) taken Freelancers hebben een hekel aan doen

Het ding met freelancen is dat het een bedrijf is. U bent misschien een grafisch ontwerper, schrijver of webontwikkelaar van beroep, maar aangezien u zaken doet, zijn er altijd saaie maar essentiële taken, weet u, zoals het organiseren van overweldigende takenlijsten of het indienen van walgelijke belastingen.

(Technische en ontwerptips)

Responsieve beelden gemakkelijk gemaakt met ResponsifyJS

Het moderne web zou 100% responsief moeten zijn en nieuwere bibliotheken maken dit steeds beter mogelijk.Met gratis plug-ins, zoals ResponsifyJS, is het nog eenvoudiger om uw websites op alle apparaten te laten werken. Deze gratis jQuery-plug-in neemt een container met afbeeldingen en herschikt deze dynamisch op basis van verschillende schermformaten

(Technische en ontwerptips)