नई वर्डप्रेस थीम डिज़ाइनरों के लिए एसस का परिचय

एक नया WordPress थीम डिज़ाइनर के रूप में, आप लंबे सीएसएस फ़ाइलों को बनाए रखने की चुनौतियों को जल्दी से सीखेंगे, जबकि उन्हें व्यवस्थित, स्केलेबल, और पठनीय रखा जाएगा। आप यह भी सीखेंगे कि कई डिजाइनर और फ्रंट एंड डेवलपर्स एक सीएसएस प्रीप्रोसेसर लैंग्वेज जैसी भाषा का उपयोग करने की सलाह देते हैं। लेकिन ये चीजें क्या हैं? और आप उनके साथ कैसे शुरू करते हैं? यह लेख नए वर्डप्रेस थीम डिज़ाइनरों के लिए एसएएस के लिए एक परिचय है हम आपको बताएंगे कि एक सीएसएस प्रीप्रोसेसर क्या है, आपको इसकी आवश्यकता क्यों है, और इन्हें किस प्रकार इंस्टॉलेशन और उनका उपयोग करना शुरू करना है।

सास क्या है?

जिस सीएसएस का हम उपयोग करते हैं वह स्टाइलशीट भाषा का उपयोग करना आसान हो गया था। हालांकि वेब विकसित हो गया है, और ऐसा स्टाइलशीट भाषा रखने के लिए डिजाइनरों की ज़रूरत है जो उन्हें कम प्रयास और समय के साथ और अधिक करने की अनुमति देता है। सीएसएस प्रीप्रोसेसर भाषाओं, जैसे सास, आपको ऐसी सुविधाओं का उपयोग करने की अनुमति देती हैं जो वर्तमान में सीएसएस में उपलब्ध नहीं हैं जैसे कि वेरिएबल्स, बुनियादी गणित ऑपरेटर, नेस्टिंग, मिक्सिक्स आदि।

यह बहुत ही PHP की तरह है जो एक प्रीप्रोसेसर भाषा है जो सर्वर पर एक स्क्रिप्ट निष्पादित करता है और एक HTML आउटपुट उत्पन्न करता है। इसी प्रकार, एसएएस के पूर्वप्रक्रिया .scss फ़ाइलों को सीएसएस फ़ाइलों को उत्पन्न करने के लिए जो ब्राउज़रों द्वारा उपयोग किए जा सकते हैं।

संस्करण 3.8 के बाद से, विकास के लिए सास का उपयोग करने के लिए वर्डप्रेस एडमिन क्षेत्र की शैलियों को रखा गया था। कई वर्डप्रेस थीम की दुकानों और डेवलपर्स पहले से ही अपनी विकास प्रक्रिया को गति देने के लिए Sass का उपयोग कर रहे हैं।

WordPress थीम विकास के लिए सास के साथ आरंभ करना

ज्यादातर थीम डिज़ाइनर स्थानीय विकास पर्यावरण का इस्तेमाल स्टेजिंग पर्यावरण या लाइव सर्वर पर तैनात करने से पहले अपने विषयों पर काम करने के लिए करते हैं। चूंकि सास प्रीप्रोसेसर भाषा है, इसलिए आपको इसे अपने स्थानीय विकास पर्यावरण पर स्थापित करना होगा।

पहली चीज आपको करने की ज़रूरत है Sass को स्थापित करना इसका उपयोग कमांड लाइन टूल के रूप में किया जा सकता है, लेकिन सास के लिए कुछ अच्छे GUI ऐप्स भी उपलब्ध हैं। हम कोआला का उपयोग करने की सलाह देते हैं, जो मैक, विंडोज, और लिनक्स के लिए एक मुफ्त ओपनर्स ऐप उपलब्ध है।

इस लेख की खातिर आपको एक रिक्त थीम बनाने की आवश्यकता होगी। बस में एक नया फ़ोल्डर बनाएँ / Wp- सामग्री / विषयों / । आप इसे ‘मायथैम’ या आप चाहते हैं कुछ भी नाम कर सकते हैं अपने रिक्त थीम फ़ोल्डर के अंदर एक और फ़ोल्डर बनाएँ और इसे स्टाइलशीट नाम दें।

स्टाइलशीट फ़ोल्डर में, आपको एक बनाना होगा style.scss नोटपैड जैसे पाठ संपादक का उपयोग कर फ़ाइल

अब आपको कोआला को खोलने और एक नई परियोजना जोड़ने के लिए प्लस आइकन पर क्लिक करना होगा। इसके बाद, अपनी थीम निर्देशिका खोजें और इसे अपने प्रोजेक्ट के रूप में जोड़ें। आप देखेंगे कि कोआला स्वचालित रूप से अपनी स्टाइलशीट निर्देशिका में Sass फ़ाइल खोज लेगा और इसे प्रदर्शित करेगा।

अपने Sass फ़ाइल पर राइट क्लिक करें और चुनें आउटपुट पथ सेट करें विकल्प। अब अपनी थीम निर्देशिका की जड़ चुनें, उदाहरण के लिए, / Wp- सामग्री / विषयों / mytheme / और हिट दर्ज करें। कोआला अब आपकी थीम निर्देशिका में सीएसएस आउटपुट फाइल उत्पन्न करेगा। इसका परीक्षण करने के लिए आपको अपना Sass फ़ाइल खोलना होगा style.scss नोटपैड जैसे पाठ संपादक में और यह कोड जोड़ें:

$ फोंट: एरियल, वर्डाना, सेन्स-सेरिफ़;
 तन {
 font-family: $ फोंट;
 } 

अब आपको अपने बदलावों को सहेजने और कोआला वापस जाने की आवश्यकता है। अपने Sass फ़ाइल पर राइट क्लिक करें, और साइडबार दाएं पर स्लाइड करेंगे अपनी Sass फ़ाइल संकलित करने के लिए बस पर क्लिक करें ‘संकलित करें’ बटन। आप खोलकर परिणाम देख सकते हैं style.css अपनी थीम निर्देशिका में फ़ाइल करें, और इसमें इस तरह संसाधित सीएसएस होगा:

तन {
   फ़ॉन्ट-परिवार: एरियल, वर्दााना, सेन्स-सेरिफ़;  } 

ध्यान दें कि हमने एक चर परिभाषित किया है $ फोंट हमारे Sass फ़ाइल में अब जब भी हम फ़ॉन्ट परिवार को जोड़ना चाहते हैं, हमें फिर से सभी फोंट के नाम टाइप करने की आवश्यकता नहीं है। हम सिर्फ उपयोग कर सकते हैं $ फोंट ।

क्या अन्य महाशक्ति एसएएस को सीएसएस लाता है?

सास अविश्वसनीय रूप से शक्तिशाली, पिछड़े संगत, और जानने के लिए सुपर आसान है। जैसा कि हमने पहले उल्लेख किया है कि आप चर, घोंसले के शिकार, मिक्सिन, आयात, आंशिक, गणितीय और तार्किक ऑपरेटरों आदि बना सकते हैं। अब हम आपको कुछ उदाहरण दिखाएंगे, और आप उन्हें अपने WordPress थीम पर आज़मा सकते हैं।

एकाधिक स्टाइलशीट्स को प्रबंधित करना

एक सामान्य समस्या जिसे आप वर्डप्रेस थीम डिज़ाइनर के रूप में सामना करेंगे, बहुत सी वर्गों के साथ बड़े स्टाइलशीट हैं। अपने विषय पर काम करते समय आप चीजों को ठीक करने के लिए संभवतः शायद बहुत कुछ स्क्रॉल कर लेंगे। Sass का उपयोग करके, आप अपनी फ़ाइलों के लिए अपने मुख्य स्टाइलशीट में एक से अधिक फ़ाइलों को आयात कर सकते हैं और अपनी थीम के लिए एक सीएसएस फ़ाइल आउटपुट कर सकते हैं।

सीएसएस के बारे में क्या? आयात?

आपकी सीएसएस फ़ाइल में @ इंपोर्ट का प्रयोग करने में समस्या यह है कि जब भी आप @import जोड़ते हैं, तो आपकी सीएसएस फाइल सर्वर पर एक और HTTP अनुरोध बनाती है यह आपके पृष्ठ लोड समय को प्रभावित करता है जो आपके प्रोजेक्ट के लिए अच्छा नहीं है। दूसरी तरफ, जब आप Sass में @import का उपयोग करते हैं, तो यह आपके Sass फ़ाइल में फाइलों को शामिल करेगा और उन सभी को ब्राउज़रों के लिए एक एकल सीएसएस फ़ाइल में प्रदान करेगा।

Sass में @import का उपयोग करने का तरीका जानने के लिए, पहले आपको एक बनाना होगा reset.scss अपने विषय की स्टाइलशीट निर्देशिका में फ़ाइल करें और उसमें इस कोड को पेस्ट करें।

/ * http://meyerweb.com/eric/tools/css/reset/
    v2.0 |  20110126
    लाइसेंस: कोई नहीं (सार्वजनिक डोमेन)
 * /

 html, body, div, span, applet, ऑब्जेक्ट, iframe,
 एच 1, एच 2, एच 3, एच 4, एच 5, एच 6, पी, ब्लॉकक्ोट, प्री,
 एक, abbr, परिवर्णी शब्द, पता, बड़ा, उद्धरण, कोड,
 del, dfn, em, img, ins, kbd, q, s, samp,
 छोटे, हड़ताल, मजबूत, उप, समर्थन, टीटी, var,
 बी, यू, आई, केंद्र,
 डीएल, डीटी, डीडी, ओएल, उल, ली,
 फ़ील्ड, फ़ॉर्म, लेबल, किंवदंती,
 टेबल, कैप्शन, टिब्बा, टीफुट, थीड, ट्र, वें, टीडी,
 लेख, एक तरफ, कैनवास, विवरण, एम्बेड,
 आंकड़ा, अंडाकार, पादलेख, शीर्षलेख, एचग्रुप,
 मेनू, एनएवी, आउटपुट, रूबी, सेक्शन, सारांश,
 समय, चिह्न, ऑडियो, वीडियो {
 मार्जिन: 0;
 पैडिंग: 0;
 सीमा: 0;
 फ़ॉन्ट-आकार: 100%;
 फ़ॉन्ट: वारिस;
 ऊर्ध्वाधर-संरेखित: बेसलाइन;
 }
 / * पुराने ब्राउज़र के लिए HTML5 प्रदर्शन-भूमिका रीसेट * /
 लेख, एक तरफ, विवरण, figcaption, आंकड़ा,
 पादलेख, शीर्षक, hgroup, मेनू, एनएवी, अनुभाग {
 प्रदर्शन क्षेत्र;
 }
 तन {
 रेखा-ऊंचाई: 1;
 }
 ol, उल {
 सूची शैली: कोई नहीं;
 }
 ब्लॉकक्ॉट, क्यू {
 उद्धरण: कोई नहीं;
 }
 ब्लॉककोट: पहले, ब्लॉकक्ॉट: के बाद,
 q: पहले, q: के बाद {
 सामग्री: '';
 सामग्री: कोई नहीं;
 }
 टेबल {
 सीमा-पतन: पतन;
 सीमा-रिक्ति: 0;
 } 

अब आपको अपनी मुख्य शैली.scss फ़ाइल खोलने और इस लाइन को जोड़ने की आवश्यकता है जहां आप रीसेट फाइल आयात करना चाहते हैं:

@import 'रीसेट'; 

ध्यान दें कि आपको पूर्ण फ़ाइल नाम दर्ज करने की आवश्यकता नहीं है। इसे संकलित करने के लिए, आपको कोआला खोलने और फिर संकलन बटन पर क्लिक करना होगा। अब अपने विषय की मुख्य style.css फ़ाइल खोलें, और आप इसमें रीसेट सीएसएस शामिल देखेंगे।

सास में नेसिन

एचटीएमएल के विपरीत सीएसएस एक नेस्टेड भाषा नहीं है Sass ने नेस्टेड फाइल बनाने की अनुमति दी है जो प्रबंधन और काम करने में आसान है। उदाहरण के लिए, आप सभी तत्वों के लिए घोंसला बना सकते हैं

अनुभाग चयनकर्ता के तहत अनुभाग। एक वर्डप्रेस थीम डिज़ाइनर के रूप में, यह आपको अलग-अलग खंडों पर काम करने और प्रत्येक तत्वों को आसानी से डिजाइन करने की अनुमति देता है। कार्रवाई में नेस्टिन देखने के लिए, इसे अपने में जोड़ें style.scss फ़ाइल:

.entry-content {
 पी {
 font-size: 12px;
 line-height: 150%;
 }
 उल {
 line-height: 150%;
 }
 क: लिंक, ए: विज़िट किया गया, ए: सक्रिय {
 text-decoration: कोई नहीं;
 रंग: # एफएफ 6633;
 }
 } 

संसाधित करने के बाद यह निम्नलिखित सीएसएस का उत्पादन करेगा:

.entry-content p {
   फ़ॉन्ट आकार: 12px;
   रेखा-ऊंचाई: 150%;  }
 .entry-content ul {
   रेखा-ऊंचाई: 150%;  }
 .entry-content a: लिंक, .entry-content a: दौरा, .entry-content a: सक्रिय {
   पाठ-सजावट: कोई नहीं;
   रंग: # एफएफ 6633;  } 

थीम डिज़ाइनर के रूप में, आप विजेट, पोस्ट, नेविगेशन मेनू, हेडर आदि के लिए अलग-अलग रूपों को महसूस करेंगे और महसूस करेंगे। Sass में नेस्टिन का इस्तेमाल करना अच्छी तरह से संरचित बनाता है, और आपको उसी श्रेणी, चयनकर्ताओं और पहचानकर्ताओं को लिखना नहीं है और एक बार फिर।

एसस में मिक्सिन का उपयोग करना

कभी-कभी आपको कुछ सीएसएस को अपनी प्रोजेक्ट के जरिए पुनः उपयोग करने की ज़रूरत होगी, हालांकि स्टाइल नियम समान होंगे क्योंकि आप उन्हें विभिन्न चयनकर्ताओं और कक्षाओं पर उपयोग करेंगे। यह वह जगह है जहां मिक्सिंस काम में आते हैं। आपकी शैली.scss फ़ाइल में एक मिक्सिन जोड़ें:

@ मिसीन छुपा पाठ {
     छिपा हुआ सैलाब;
     पाठ इंडेंट: -9000px;
     प्रदर्शन क्षेत्र;
 } 

यह मिक्सर मूलतः कुछ पाठ को प्रदर्शित होने से छुपाता है आपके लोगो के लिए पाठ को छिपाने के लिए आप इस मिक्सिन का उपयोग कैसे कर सकते हैं इसका उदाहरण यहां दिया गया है:

।प्रतीक चिन्ह{
     पृष्ठभूमि: url ("logo.png");
     ऊँचाई: 100px;
     चौड़ाई: 200px;
     @ छुपा पाठ शामिल;
 } 

ध्यान दें कि आपको उपयोग करने की आवश्यकता है @शामिल एक मिश्रण जोड़ने के लिए प्रसंस्करण के बाद यह निम्नलिखित सीएसएस उत्पन्न करेगा:

।प्रतीक चिन्ह {
   पृष्ठभूमि: url ("logo.png");
   ऊंचाई: 100px;
   चौड़ाई: 200px;
   छिपा हुआ सैलाब;
   टेक्स्ट इंडेंट: -9000px;
   प्रदर्शन क्षेत्र;  } 

मिक्सिंस भी विक्रेता उपसर्गों के साथ बहुत उपयोगी हैं। जब आप अस्पष्टता मान या सीमा त्रिज्या जोड़ते हैं, मिक्सिक्स का उपयोग करते हुए आप बहुत समय बचा सकते हैं इस उदाहरण को देखो, जहां हमने सीमा त्रिज्या जोड़ने के लिए एक मिक्सिन जोड़ा है।

@ मिसिन सीमा-त्रिज्या ($ त्रिज्या) {
   -विबिट-सीमा-त्रिज्या: $ त्रिज्या;
      -मोझ-सीमा-त्रिज्या: $ त्रिज्या;
       -एमएमएस-सीमा-त्रिज्या: $ त्रिज्या;
        -ओ-सीमा-त्रिज्या: $ त्रिज्या;
           सीमा-त्रिज्या: $ त्रिज्या;
 }

 .largebutton {@ सीमा-त्रिज्या (10px) को शामिल करना;  }
 .smallbutton {@ सीमा-त्रिज्या (5px) को शामिल करना;  } 

संकलन के बाद, यह निम्नलिखित सीएसएस उत्पन्न करेगा:

.largebutton {
   -वेबकिट-सीमा-त्रिज्या: 10px;
   -मोझ-सीमा-त्रिज्या: 10px;
   -एमएमएस-सीमा-त्रिज्या: 10px;
   -ओ-सीमा-त्रिज्या: 10px;
   सीमा-त्रिज्या: 10px;  }

 .smallbutton {
   -वेबकिट-सीमा-त्रिज्या: 5px;
   -मोझ-सीमा-त्रिज्या: 5px;
   -एमएमएस-सीमा-त्रिज्या: 5px;
   -ओ-सीमा-त्रिज्या: 5px;
   सीमा-त्रिज्या: 5px;  } 

हमें उम्मीद है कि इस आलेख ने वर्डप्रेस थीम विकास के लिए सास में आपकी दिलचस्पी खुल गई है। कई वर्डप्रेस थीम डिज़ाइनर पहले ही इसका इस्तेमाल कर रहे हैं। कुछ लोग कहते हैं कि भविष्य में सभी सीएसएस पूर्वप्रक्रमित हो जाएंगे, और वर्डप्रेस थीम डेवलपर्स को अपने गेम को अप करने की जरूरत है। हमें एक सीएसएस प्रीप्रोसेसर लैटिन भाषा का उपयोग करने के बारे में हमें बताएं, जैसे सास को अपने वर्डप्रेस थीम विकास के लिए नीचे एक टिप्पणी छोड़कर।

अतिरिक्त संसाधन

सास लैंग
सास वे