Stylus sigar pre-processor ce CSS, wanda ke bamu damar yin aiki a sauƙaƙe a cikin editan rubutun namu sannan na bayyana dalilan bayanin na.
Wannan takardar salo ce kamar yadda muka san ta:
jiki {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-iyakar-radius: 5px; -moz-iyakar-radius: 5px; iyakar-radius: 5px; }
Kuma wannan zai zama nau'in tsarin salo iri ɗaya wanda aka ƙirƙira shi da Stylus:
font body 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px iyakar-radius 5px
Ina makullin? Ina semicolons suka tafi, mulkin mallaka? Manta, Stylus yayi mana haka.
Idan zaka fara da CSS y HTML ba shi da shawarar yin amfani da shi Stylus don sauƙin gaskiyar cewa zaku iya manta yadda abubuwa suke aiki da gaske, amma idan kun riga kun sami lokaci a wannan duniyar kuma kuna son adana lambar ku da aiki .. ci gaba.
Masu shirye-shirye Python zai samu a Stylus wani abu mai kamanceceniya da abin da ya dace da su, tunda kawai kuna buƙatar shigar da haske daidai don yin sihirin.
Shigarwa
Don haka Stylus aiki dole mu girka Node.js wanda yake a cikin reshen ,ungiyar, saboda haka muna ci gaba da yin sa:
$ sudo pacman -S nodejs
Kuma daga baya mun sanya Stylus. Hanyar gargajiya zata kasance:
$ npm install -g stylus
Yana shigar da kyau, amma baya aiki a wurina, saboda haka yana da sauƙin shigarwa daga AUR:
$ yaourt -S nodejs-stylus
Yadda ake amfani da Stylus
Yayi, mun riga mun girka Node.js kuma mun girka Stylus.. Ta yaya muke amfani da shi? Abu ne mai sauki. Bari mu ce muna da kundin adireshi tare da fayiloli masu zuwa:
- dir - index.html - style.css
Abin da ya kamata mu yi shine ƙirƙirar fayil ɗin salo.styl, wanda shine zamuyi aiki dashi. A cikin wannan fayil ɗin zamu iya samun wani abu kamar:
launin baya-launi #ffff font-size 12px a.button launi ja padding 10px
Idan muka adana ko muka yi wasu canje-canje babu abin da zai faru, saboda ba mu 'tattara' fayil ɗinmu bane. Don tattara shi, abin da muke yi shine buɗe tashar a cikin kundin adireshinmu (inda fayil ɗin yake salo.styl) kuma muna aiwatarwa:
stylus -c style.styl
Amma duk lokacin da muka ajiye fayil din salo.styl dole ne mu aiwatar da lambar, amma sa'a ba lallai ba ne, tunda idan za mu aiwatar da umarni iri ɗaya, amma ƙara siga -w (kalli) mai zuwa yana faruwa:
Stylus -c -w style.styl kallon /usr/lib/node_modules/stylus/lib/functions/index.styl hada salon.css kallon style.styl harhada style.css harhada style.css
A takaice dai, ana tattara fayil ɗin kai tsaye .. Shin sakamakon zai kasance?
jiki {baya-launi: #fff; font-size: 12px} a.button {launi: # f00; padding: 10px}
Kamar yadda kake gani, ba lambar mu kawai ke ƙirƙirar mu ba CSS, amma yana kawar da wuraren da ba dole bane domin takardar salon mu tayi nauyi less
Ba wai kawai ba, Stylus Yana ba mu damar shigar da fayilolin CSS zuwa tsarin su kuma hanyar da zamu yi amfani da rubutun su ya bambanta. Kuma wannan kawai samfoti ne. Don haka ina ƙarfafa ku idan kuna da sha'awar, don ƙarin sani game da Stylus
Yana tare da:
$ sudo npm shigar -g stylus
Amma me yasa? Idan kawai ina son amfani da shi a cikin zaman na .. amma da kyau, idan matsalar ita ce .. 🙂
Da farko yana da kyau, amma ana amfani da Stylus tare da plugins daban yayin da kuke tafiya, misali Nib ko Stylus auto prefixer.
Ina tsammanin lokacin da kuka girka shi tare da Yaourt ba a adana shi a cikin / usr / na gida / lib / node_modules ba kuma idan kun yi ƙoƙarin shigowa da amfani da kowane ɗakunan karatu, za ku sha wahala xD
Ya faru cewa kamar yadda na gaya muku a cikin taron, Stylus ya dogara ne akan amfani da dakunan karatu a bayyane daga tashar, shine asalin wannan magabacin, yana yin abubuwa kamar:
stylus -u jeet -u fashewa -u rubutu -u nib -w style.styl
Don faɗin wani abu (zaku iya samun laƙabi ko aiki ko amfani da gulp ko gurnani, ko menene: 3). Abu mai ban sha'awa game da wannan shi ne cewa ba ya fitar da css daga akwatin yayin tattarawa, amma yana cika shi "da ƙarfi" kamar yadda a cikin lambarka kuke kiran ayyuka da haɗin haɗin ɗakunan karatu daban-daban.
A zahiri, zai sanya lambar layin da aka ayyana (sake saitawa, share share, da sauransu) amma ba zai sa ku shan sigari ba misali ayyukan span () na jeet idan baku kira su ba kuma wannan shine tsarkakakkiyar soyayya x3
Duniya ce gabaɗaya kuma shi ya sa nake gaya muku, girka ta haka ban san fayilolin da ta faɗa ciki ba kuma bana tsammanin za ku iya amfani da ƙarin don kawai saboda lokacin da kuke amfani da layin umarni, - amfani da tuta zai duba cikin babban fayil din shigowar sandar, tare da kumburi node_modules kuma ya tsaya inda na fada a sama, tare da Yaourt, NPI xD
mai ban sha'awa!
Ina ba ku shawarar ku yi kwas na koya game da yadda za ku yi amfani da lambar SIP don kiran wayoyin hannu daga kwamfutar ... kyauta