Įdiekite „Stylus“ į „ArchLinux“ nemėgindami

Plunksna yra kodo išankstinis procesorius CSS, kuris leidžia mums paprasčiau dirbti savo teksto redaktoriuje, o tada aš paaiškinu savo teiginio priežastis.

Tai yra stiliaus lapas, kurį mes žinome:

body {font: 12px Helvetica, Arial, sans-serif; } a. mygtukas {-webkit-border-radius: 5px; -moz-border-radius: 5px; krašto spindulys: 5 tšk. }

Tai būtų tas pats stiliaus lapas, sukurtas naudojant Rašiklis:

kūno šriftas 12 taškų „Helvetica“, „Arial“, „sans-serif a.button“ - internetkit-border-radius 5px -moz-border-radius 5px border-radius 5px

Kur yra raktai? Kur dingo kabliataškiai, dvitaškis? Pamirštas, Plunksna daro tai už mus.

Jei pradedate nuo CSS y HTML nerekomenduojama naudoti Plunksna dėl paprasto fakto, kad galite pamiršti, kaip viskas iš tikrųjų veikia, bet jei jau turite laiko šiame pasaulyje ir norite sutaupyti kodą ir dirbti .. pirmyn.

Programuotojai Pitonas jie ras Plunksna kažkas labai panašaus į tai, prie ko jie yra pritaikyti, nes norint padaryti magiją reikia tik teisingai įbrėžti.

Montavimas

Už Plunksna darbas, kurį turime įdiegti Node.js kuris yra Bendrijos padalinyje, todėl mes tai darome:

$ sudo pacman -S nodejs

Ir vėliau mes įdiegiame „Stylus“. Tradicinis būdas būtų:

$ npm install -g stylus

Tai gerai įdiegiama, bet man tai neveikia, todėl ją įdiegti iš AUR yra daug lengviau:

$ yaourt -S nodejs-stylus

Kaip naudoti pieštuką

Gerai, mes jau įdiegėme Node.js ir mes įdiegėme Plunksna.. Kaip mes jį naudojame? Tai paprasta. Tarkime, kad turime katalogą su šiais failais:

- dir - index.html - style.css

Tai, ką turime padaryti, yra sukurti failą stilius.stilius, kurį ketiname dirbti. Tame faile galime turėti kažką panašaus:

kūno fono spalva #ffff šrifto dydis 12 taškų a. mygtuko spalva raudona kamšalu 10 taškų

Jei išsaugosime ar atliksime kokius nors pakeitimus, nieko neatsitiks, nes „nekompiliuojame“ savo failo. Norėdami jį sukompiliuoti, atidarykite terminalą savo kataloge (kur failas stilius.stilius) ir įvykdyti:

stylus -c style.styl

Bet kiekvieną kartą išsaugodami failą stilius.stilius turėtume vykdyti kodą, bet, laimei, tai nėra būtina, nes jei vykdome tą pačią komandą, bet pridėdami parametrą -w (žiūrėti) nutinka taip:

rašiklis -c -w style.styl žiūrėjimas /usr/lib/node_modules/stylus/lib/functions/index.styl kompiliuotas style.css žiūrėjimas style.styl kompiliuotas style.css kompiliuotas style.css

Kitaip tariant, failas kompiliuojamas automatiškai. Ar rezultatas bus?

body {background-color: #fff; font-size: 12px} a.utton {color: # f00; padding: 10px}

Kaip matote, mūsų kodas ne tik sukuria mus CSS, bet pašalina nereikalingas tarpus, todėl mūsų stiliaus lapas sveria mažiau 😀

Ne tik tai, Plunksna Tai leidžia mums perduoti failus CSS į jų formatą, o jų sintaksės naudojimo būdas yra labai įvairus. Ir tai tik peržiūra. Taigi, jei jus domina, raginu jus žinoti apie tai daugiau Plunksna