Pluma ay isang pre-processor ng code CSS, na nagbibigay-daan sa amin upang gumana nang mas simple sa aming text editor at pagkatapos ay ipinapaliwanag ko ang mga dahilan para sa aking pahayag.
Ito ay isang style sheet na alam namin:
katawan {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
At ito ang magiging parehong styleheet na nilikha sa Stylus:
body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Nasaan ang mga susi? Nasaan ang mga semicolon, ang colon? Nakalimutan, Pluma ginagawa ba iyon para sa atin.
Kung nagsisimula ka sa CSS y HTML hindi ito inirerekumenda na gamitin Pluma para sa simpleng katotohanan na maaari mong kalimutan kung paano talaga gumagana ang mga bagay, ngunit kung mayroon ka nang oras sa mundong ito at nais mong i-save ang iyong sarili code at trabaho .. sige.
Mga programmer Sawa mahahanap nila sa Pluma isang bagay na halos kapareho sa kung ano ang iniangkop sa kanila, dahil kailangan mo lamang na indent nang tama para magawa ang mahika.
Instalasyon
Kaya nga Pluma trabaho na kailangan nating mai-install node.js na nasa sangay ng Komunidad, kaya't ginagawa namin ito:
$ sudo pacman -S nodejs
At sa paglaon ay nai-install namin ang Stylus. Ang tradisyunal na paraan ay:
$ npm install -g stylus
Mag-install ito ng maayos, ngunit hindi ito gumagana para sa akin, kaya mas madaling mag-install mula sa AUR:
$ yaourt -S nodejs-stylus
Paano gamitin ang Stylus
Ok, naka-install na kami node.js at naka-install na kami Pluma.. Paano natin ito magagamit? Ito ay simple. Sabihin nating mayroon kaming direktoryo na may mga sumusunod na file:
- dir - index.html - style.css
Ang dapat nating gawin ay lumikha ng file style.style, alin ang ating pagtatrabaho. Sa file na iyon maaari kaming magkaroon ng isang bagay tulad ng:
body background-color #ffff font-size 12px a. Kulay ng pulang pulang padding 10px
Kung nai-save o gumawa kami ng anumang mga pagbabago walang nangyari, dahil hindi namin "pinagsasama-sama" ang aming file. Upang maipon ito, ang ginagawa namin ay magbubukas ng isang terminal sa aming direktoryo (kung saan ang file style.style) at isinasagawa namin:
stylus -c style.styl
Ngunit sa tuwing nai-save namin ang file style.style kailangan naming ipatupad ang code, ngunit sa kabutihang palad hindi ito kinakailangan, dahil kung isinasagawa namin ang parehong utos, ngunit idaragdag ang parameter -w (panoorin) ang sumusunod na nangyari:
style ng stylus -c -w.styl nanonood /usr/lib/node_modules/stylus/lib/function/index.styl compiled style.css nanonood ng style. styl compiled style.css compiled style.css
Sa madaling salita, awtomatikong naiipon ang file .. Magiging resulta ba?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Tulad ng nakikita mo, hindi lamang ang aming code ang lumilikha sa amin CSS, ngunit inaalis nito ang mga hindi kinakailangang espasyo upang ang aming style sheet ay mas mababa ang bigat 
Hindi lang iyon, Pluma Pinapayagan kaming ipasa ang mga CSS file sa kanilang format at ang paraan na magagamit namin ang kanilang syntax ay iba-iba. At ito ay isang preview lamang. Kaya hinihikayat ko kayo kung interesado kayo, upang malaman nang kaunti pa Pluma