પ્રયાસમાં મર્યા વિના આર્કલિંક્સમાં સ્ટાયલસ સ્થાપિત કરો

સ્ટાઇલસ એક કોડ પૂર્વ પ્રોસેસર છે સીએસએસ, જે અમને અમારા ટેક્સ્ટ સંપાદકમાં વધુ સરળ રીતે કામ કરવાની મંજૂરી આપે છે અને પછી હું મારા નિવેદનના કારણોને સમજાવું છું.

આ એક સ્ટાઇલ શીટ છે કારણ કે આપણે જાણીએ છીએ:

બોડી {ફ{ન્ટ: 12 પીએક્સ હેલ્વેટિકા, એરિયલ, સાન્સ-સેરીફ; } એ.બટન we -વેબકીટ-બોર્ડર-ત્રિજ્યા: 5 પીએક્સ; -મોઝ-બોર્ડર-ત્રિજ્યા: 5 પીએક્સ; સરહદ ત્રિજ્યા: 5 પીએક્સ; }

અને આ તે જ સ્ટાઇલશીટ હશે જેની સાથે બનાવેલ છે સ્ટાયલસ:

બોડી ફ fontન્ટ 12 પીએક્સ હેલ્વેટિકા, એરિયલ, સાન્સ-સેરીફ એ.બટન -વેબકીટ-બોર્ડર-રેડીયસ 5 પીએક્સ -મોઝ-બોર્ડર-ત્રિજ્યા 5px બોર્ડર-ત્રિજ્યા 5px

કીઓ ક્યાં છે? અર્ધવિરામ, કોલોન ક્યાં હતો? ભૂલી ગયા, સ્ટાઇલસ તે આપણા માટે કરે છે.

જો તમે પ્રારંભ કરી રહ્યા છો સીએસએસ y HTML તેનો ઉપયોગ કરવાની ભલામણ કરવામાં આવતી નથી સ્ટાઇલસ આ સરળ હકીકત માટે કે તમે ભૂલી શકો છો કે વસ્તુઓ ખરેખર કેવી રીતે કાર્ય કરે છે, પરંતુ જો તમારી પાસે આ દુનિયામાં પહેલેથી જ સમય છે અને પોતાને કોડ અને કાર્ય બચાવવા માંગતા હોવ તો .. આગળ વધો.

પ્રોગ્રામરો પાયથોન માં મળશે સ્ટાઇલસ તેઓ જેની સાથે અનુરૂપ છે તેનાથી કંઈક સમાન, કારણ કે તમારે જાદુ કરવા માટે ફક્ત યોગ્ય રીતે ઇન્ડેન્ટ કરવાની જરૂર છે.

સ્થાપન

તેથી તે સ્ટાઇલસ કામ આપણે સ્થાપિત કરવું પડશે Node.js જે કમ્યુનિટિ શાખામાં છે તેથી અમે તેને આગળ વધારીએ છીએ:

$ sudo pacman -S nodejs

અને પછીથી આપણે સ્ટાયલસ સ્થાપિત કરીએ છીએ. પરંપરાગત રીત હશે:

$ npm install -g stylus

તે દંડ સ્થાપિત કરે છે, પરંતુ તે મારા માટે કામ કરતું નથી, તેથી URરથી ઇન્સ્ટોલ કરવું ખૂબ સરળ છે:

$ yaourt -S nodejs-stylus

સ્ટાયલસનો ઉપયોગ કેવી રીતે કરવો

ઠીક છે, આપણે પહેલેથી જ ઇન્સ્ટોલ કર્યું છે Node.js અને આપણે સ્થાપિત કર્યું છે સ્ટાઇલસ.. આપણે તેનો ઉપયોગ કેવી રીતે કરીએ? તે સરળ છે. ચાલો કહીએ કે આપણી પાસે નીચેની ફાઇલોની ડિરેક્ટરી છે:

- dir - અનુક્રમણિકા. html - શૈલી. CSS

આપણે ફાઈલ બનાવવાનું છે શૈલી, જેના પર આપણે કામ કરી રહ્યા છીએ. તે ફાઇલમાં આપણી પાસે આવું કંઈક હોઈ શકે છે:

શારીરિક પૃષ્ઠભૂમિ રંગ #ffff ફોન્ટ કદ 12px a.button રંગ લાલ ગાદી 10px

જો આપણે કોઈ ફેરફાર કરીશું અથવા કરીએ તો કંઈપણ થતું નથી, કારણ કે આપણે આપણી ફાઇલનું "કમ્પાઇલિંગ" કરી રહ્યા નથી. તેને કમ્પાઇલ કરવા માટે, આપણે શું કરીએ છીએ તે આપણી ડિરેક્ટરીમાં ટર્મિનલ ખોલવું છે (જ્યાં ફાઇલ છે શૈલી) અને અમે ચલાવીએ છીએ:

stylus -c style.styl

પરંતુ દર વખતે આપણે ફાઇલ સેવ કરીએ છીએ શૈલી આપણે કોડ એક્ઝીક્યુટ કરવો પડશે, પરંતુ સદભાગ્યે તે જરૂરી નથી, કારણ કે જો આપણે એ જ આદેશ ચલાવીશું, પરંતુ પરિમાણ ઉમેરવું -w (જુઓ) નીચે મુજબ થાય છે:

સ્ટાઈલસ-સી-ડબલ્યુ શૈલી.સ્ટાઇલ જોવાનું /usr/lib/node_modules/stylus/lib/funitions/index.styl કમ્પાઇલ કરેલ સ્ટાઇલ સી.એસ. જોવાનું સ્ટાઇલ.

બીજા શબ્દોમાં કહીએ તો, ફાઇલ આપમેળે કમ્પાઇલ થઈ ગઈ છે .. પરિણામ આવશે?

બ{ડી {બેકગ્રાઉન્ડ-રંગ: # એફએફએફ; ફ fontન્ટ-સાઇઝ: 12 પીએક્સ} એ.બટન {રંગ: # f00; ગાદી: 10px}

જેમ તમે જોઈ શકો છો, ફક્ત અમારો કોડ જ બનાવતો નથી સીએસએસછે, પરંતુ બિનજરૂરી જગ્યાઓ દૂર કરે છે જેથી અમારી શૈલી શીટનું વજન ઓછું 😀

એટલું જ નહીં, સ્ટાઇલસ તે અમને સીએસએસ ફાઇલોને તેમના બંધારણમાં પસાર કરવાની મંજૂરી આપે છે અને અમે તેમના વાક્યરચનાનો ઉપયોગ કરી શકીએ છીએ તે ખૂબ જ વૈવિધ્યસભર છે. અને આ ફક્ત એક પૂર્વદર્શન છે. તેથી જો તમને રુચિ હોય તો, વિશે થોડુંક વધુ જાણવા માટે હું તમને પ્રોત્સાહિત કરું છું સ્ટાઇલસ