Stylus waa code-pre-processor CSS, taas oo noo oggolaaneysa inaan si fudud ugu shaqeyno tifaftiraha qoraalka ka dibna waxaan sharxayaa sababaha bayaankeyga.
Tani waa warqad qaabeed sidaan ognahay:
jirka {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; xadka-gacan: 5px; }
Tanina waxay noqoneysaa isla qaab-dhismeedka qaabab lagu abuuray Stylus:
jirka font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Aaway furayaashii? Aaway semicolons, xiidanka? Waa la ilaaway, Stylus taas ma inoo qabtaa.
Hadaad bilaabayso CSS y HTML laguma talinayo in la isticmaalo Stylus xaqiiqda fudud ee ah inaad hilmaami karto sida ay wax run ahaantii u shaqeeyaan, laakiin hadaad waqti hore haysatay adduunkan oo aad rabto inaad naftaada kaydiso oo aad shaqayso .. horay u soco.
Barnaamijyada Python ka heli doontaa Stylus wax aad ugu eg waxa ay ku habboon yihiin, maadaama aad u baahan tahay oo keliya inaad si sax ah u dhex gasho sixirka si loo sameeyo.
Ku rakibida
Sidaas darteed Stylus shaqada waa inaan rakibnaa Node.js taas oo ku taal laanta bulshada, markaa waxaannu u sii soconnaa si aannu u qabanno:
$ sudo pacman -S nodejs
Hadana waanu rakibnaa Stylus. Habka dhaqameedku wuxuu noqon lahaa:
$ npm install -g stylus
Waxay rakibeysaa ganaax, laakiin aniga ima shaqeynayo, sidaas darteed way fududahay in laga rakibo AUR:
$ yaourt -S nodejs-stylus
Sida loo isticmaalo Stylus
Waayahay, horay ayaan u rakibnay Node.js waana rakibnay Stylus.. Sideen u isticmaalnaa? Way fududahay. Aynu nidhaahno waxaan leenahay buugga faylalka soo socda:
- dir - index.html - style.css
Waxa inala gudboon waa inaan abuurno faylka qaab.styl, kaas oo ah midka aan ku shaqeyn doonno. Faylkaas waxaan ku heli karnaa wax sida:
midabka asalka-midabka #ffff font-size 12px a. badhanka midabka badhanka padding 10px
Haddii aan keydinno ama aan sameyno wax isbeddel ah waxba ma dhici doonaan, maxaa yeelay annagu ma 'ururinayno' feylkeenna. Si loo soo ururiyo, waxa aan qabano ayaa ka furan terminal diiwaankayaga (halka feylku ku yaal qaab.styl) waana fulinaa:
stylus -c style.styl
Laakiin markasta oo aan kaydino faylka qaab.styl waa inaan fulinaa koodhka, laakiin nasiib wanaag looma baahna, tan iyo haddii aan fulino isla amarka, laakiin ku darista halbeegga -w (daawo) waxyaabaha soo socda ayaa dhacaya:
stylus -c -w style.styl daawashada /usr/lib/node_modules/stylus/lib/functions/index.styl la soo ururiyey style.css daawashada style.
Si kale haddii loo dhigo, faylka si otomaatig ah ayaa loo soo ururiyey .. Natiijadu ma noqonaysaa?
jirka {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Sida aad u aragto, kaliya maahan koodhkeennu inuu na abuuro CSS, laakiin waxay baabi'isaa meelaha banaan ee aan loo baahnayn si xaashida qaabkeennu u miisaan yari ugaarto 😀
Intaas oo keliya maahan, Stylus Waxay noo ogolaaneysaa inaan u gudubno feylasha CSS qaabkooda iyo qaabka aan u adeegsan karno qaab dhismeedkoodu aad ayuu u kala duwan yahay. Tanina waa horudhac. Marka waxaan kugu dhiirigelinayaa haddii aad xiisaynayso, inaad wax yar ka ogaato Stylus
Waxay la socotaa:
$ sudo npm rakib -g stylus
Laakiin sababta? Haddii aan kaliya rabo inaan ku isticmaalo kalfadhigayga .. laakiin haye, haddii dhibaatadu sidaas tahay .. 🙂
Tani way fiicantahay marka hore, laakiin Stylus waxaa loo adeegsadaa noocyo kaladuwan markaad socoto, tusaale ahaan Nib ama horudhaca otomaatiga ah ee Stylus.
Waxaan u maleynayaa in markaad ku rakibto Yaourt aysan ku badbaadin / usr / local / lib / node_modules iyo haddii aad isku daydo inaad soo dhoofsato oo aad isticmaasho mid ka mid ah maktabadaha, waad cuni lahayd xD
Way dhacdaa in sidaan horaan idinkugu sheegay golaha, Stylus wuxuu ku saleysan yahay adeegsiga maktabadaha si daah furan uguna jira terminalka, waa nuxurka hordhacaas, wuxuu sameeyaa waxyaabo sida:
stylus -u jeet -u dillaac -u qaabab -u nib -w style.styl
Wixii aad dhahdo (waxaad yeelan kartaa magac ali ama shaqo ama waxaad isticmaali kartaa calool xumo ama xanaaq, ama waxkastoo: 3). Arrinta xiisaha leh ee arrintan ku saabsan ayaa ah inaysan css-ka ka bixinaynin sanduuqa markay wax ururinayaan, laakiin ay ku buuxinayso "si firfircoon" sida koodhkaaga gudahiisa ah oo aad ugu yeedhayso howlaha iyo isku-darka maktabadaha la kala leeyahay.
Dhaqan ahaan, waxay ku ridi doontaa lambar fidsan oo la caddeeyay (resets, clearfixes, iwm) laakiin sigaar kaama dhigeyso tusaale ahaan tafaariiqda () shaqooyinka jeetka haddii aadan u wicin waana jacayl saafi ah x3
Waa adduun dhan waana sababta aan kuugu sheegayo, ku rakibidda habkaas ma aqaanno feylasha ay ku dhacdo mana u maleynayo inaad u isticmaali karto kordhinta si fudud sababtoo ah markaad isticmaaleyso qadka amarka, - Calan adeegsiga ayaa ka dhex fiirin doona galka lagu rakibayo stylus, oo leh node waa node_modules wuuna ku sii nagaanayaa meeshii aan kor ku idhi, Yaourt, NPI xD
xiiso leh!
Waxaan kuu soo jeedinayaa inaad sameyso casriyeyn casriyeysan oo ku saabsan sida loo isticmaalo nambarka SIP si aad taleefannada gacanta uga wacdo kombiyuutarka ... bilaash