schrijfstift is een code pre-processor CSS, waardoor we eenvoudiger in onze teksteditor kunnen werken en dan leg ik de redenen voor mijn verklaring uit.
Dit is een stylesheet zoals we die kennen:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; grensradius: 5px; }
En dit zou dezelfde stylesheet zijn die is gemaakt met Naald:
body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Waar zijn de sleutels? Waar kwamen de puntkomma's, de dubbele punt? Vergeten, schrijfstift doet dat voor ons.
Als je begint met CSS y HTML het wordt niet aanbevolen om te gebruiken schrijfstift voor het simpele feit dat je kunt vergeten hoe de dingen echt werken, maar als je al tijd hebt in deze wereld en jezelf code en werk wilt besparen .. ga je gang.
Programmeurs Python zal vinden in schrijfstift iets dat erg lijkt op waar ze aan zijn aangepast, omdat je alleen correct hoeft in te springen om de magie te laten doen.
Installatie
voor schrijfstift werk dat we moeten installeren Node.js die zich in de communautaire tak bevindt, dus we gaan verder om het te doen:
$ sudo pacman -S nodejs
En later installeren we Stylus. De traditionele manier zou zijn:
$ npm install -g stylus
Het installeert prima, maar het werkt niet voor mij, dus het is veel gemakkelijker te installeren vanaf AUR:
$ yaourt -S nodejs-stylus
Stylus gebruiken
Ok, we hebben al geïnstalleerd Node.js en we hebben geïnstalleerd schrijfstift.. Hoe gebruiken we het? Het is simpel. Laten we zeggen dat we een map hebben met de volgende bestanden:
- dir - index.html - style.css
Wat we moeten doen, is het bestand maken stijl.stijl, waar we aan gaan werken. In dat bestand kunnen we zoiets hebben als:
body background-color #ffff font-size 12px a.button color red padding 10px
Als we opslaan of wijzigingen aanbrengen, gebeurt er niets, omdat we ons bestand niet "compileren". Om het te compileren, openen we een terminal in onze directory (waar het bestand stijl.stijl) en we voeren uit:
stylus -c style.styl
Maar elke keer dat we het bestand opslaan stijl.stijl we zouden de code moeten uitvoeren, maar gelukkig is het niet nodig, want als we hetzelfde commando uitvoeren, maar de parameter toevoegen -w (let op) het volgende gebeurt:
stylus -c -w style.styl kijken /usr/lib/node_modules/stylus/lib/functions/index.styl gecompileerde style.css kijken style.styl gecompileerde style.css gecompileerde style.css
Met andere woorden, het bestand wordt automatisch gecompileerd. Zou het resultaat zijn?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Zoals u kunt zien, creëert onze code ons niet alleen CSS, maar het elimineert onnodige spaties zodat ons stylesheet minder weegt 
Niet alleen dat, schrijfstift Het stelt ons in staat om CSS-bestanden in hun formaat door te geven en de manier waarop we hun syntaxis kunnen gebruiken is zeer gevarieerd. En dit is slechts een voorbeeld. Dus ik moedig je aan als je geïnteresseerd bent, om er iets meer over te weten schrijfstift