प्रतिक्रिया में सैस का उपयोग कैसे करें

Sass (सिंटैक्टिकली विस्मयकारी स्टाइल शीट) अतिरिक्त सुविधाओं के साथ CSS का एक विस्तार है जो इसे और अधिक शक्तिशाली बनाता है। Sass के बारे में सबसे अच्छी बात CSS के साथ इसकी अनुकूलता है, जिसका अर्थ है कि आप इसे अपने वेब डेवलपमेंट प्रोजेक्ट्स में JavaScript फ्रेमवर्क जैसे React के साथ उपयोग कर सकते हैं।

हालाँकि, वैनिला CSS के विपरीत, आपको Sass का उपयोग करने के लिए थोड़े से सेटअप की आवश्यकता होती है। एक साधारण React.js प्रोजेक्ट बनाकर और Sass को इसके साथ जोड़कर पता करें कि यह कैसे काम करता है।

अपने React.js प्रोजेक्ट में सैस का उपयोग कैसे करें

अन्य CSS प्रोसेसरों की तरह, Sass मूल रूप से React द्वारा समर्थित नहीं है। रिएक्ट में सैस का उपयोग करने के लिए, आपको पैकेज मैनेजर जैसे यार्न या एनपीएम के माध्यम से एक तृतीय-पक्ष निर्भरता स्थापित करने की आवश्यकता है।

आप चलाकर देख सकते हैं कि आपके स्थानीय मशीन पर एनपीएम या यार्न स्थापित है या नहीं एनपीएम --वर्जन

या सूत --संस्करण. यदि आपको अपने टर्मिनल में संस्करण संख्या दिखाई नहीं देती है, एनपीएम स्थापित करें या पहले सूत।

एक React.js प्रोजेक्ट बनाएं

इस गाइड का पालन करने के लिए, आप create-react-app का उपयोग करके एक साधारण React.js ऐप सेट कर सकते हैं।

सबसे पहले, उस फ़ोल्डर पर नेविगेट करने के लिए एक कमांड लाइन का उपयोग करें जिसमें आप अपना रिएक्ट प्रोजेक्ट बनाना चाहते हैं। तो भागो npx क्रिएट-रिएक्शन-app . प्रक्रिया समाप्त होने के बाद, ऐप निर्देशिका का उपयोग करके दर्ज करें सीडी . निम्नलिखित सामग्री को अपने में जोड़ें ऐप.जेएस स्टार्टर के रूप में फाइल करें:

आयात प्रतिक्रिया से "प्रतिक्रिया";
आयात "./App.scss";
समारोहअनुप्रयोग() {
वापस करना (
<डिव क्लासनाम ="आवरण">
<एच 1>प्रतिक्रिया में सैस का उपयोग करना</h1>
<शीर्षलेख वर्गनाम ="wrapper__btns">
<बटन>नीला बटन</button>
<बटन>लाल बटन</button>
<बटन>हरा बटन</button>
</header>
</div> );
}
निर्यातगलती करना अनुप्रयोग;

एक बार जब आप एक बुनियादी रिएक्ट परियोजना स्थापित कर लेते हैं, तो यह सैस को एकीकृत करने का समय है।

सास स्थापित करें

आप सास को एनपीएम या यार्न के माध्यम से स्थापित कर सकते हैं। इसे चलाकर सूत के माध्यम से स्थापित करें यार्न सास जोड़ें या, यदि आप एनपीएम पसंद करते हैं, तो दौड़ें एनपीएम सास स्थापित करें. आपका पैकेज प्रबंधक Sass के नवीनतम संस्करण को प्रोजेक्ट की निर्भरताओं की सूची में जोड़ देगा पैकेज.जेसन फ़ाइल।

.css फ़ाइलों को .scss या .sass में पुनर्नामित करें

प्रोजेक्ट के फ़ोल्डर में, क्रमशः App.css और index.css का नाम बदलकर App.scss और index.scss कर दें।

आपके द्वारा उन फ़ाइलों का नाम बदलने के बाद, आपको नई फ़ाइल एक्सटेंशन से मेल खाने के लिए अपनी App.js और index.js फ़ाइलों में आयात को अपडेट करने की आवश्यकता है:

आयात "./index.scss";
आयात "./App.scss";

इस बिंदु से आगे, आपको अपने द्वारा बनाई गई किसी भी शैली फ़ाइल के लिए .scss एक्सटेंशन का उपयोग करना चाहिए।

वेरिएबल्स और मिक्सिन्स का आयात और उपयोग करना

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

सबसे पहले, एक नया बनाएँ शैलियों आपके फ़ोल्डर में स्रोत फ़ोल्डर। शैलियाँ फ़ोल्डर में, दो फ़ाइलें बनाएँ: _variables.scss और _mixins.scss. निम्न नियमों को _variables.scss में जोड़ें:

$पृष्ठभूमि-रंग: #f06292;
$ टेक्स्ट-रंग: #f1d3b3;
$btn-चौड़ाई: 120पीएक्स;
$btn-ऊंचाई: 40पीएक्स;
$ ब्लॉक-पैडिंग: 60पीएक्स;

और निम्नलिखित को _mixins.scss में जोड़ें:

@mixin लंबवत-सूची {
डिस्प्ले: फ्लेक्स;
संरेखित-आइटम: केंद्र;
फ्लेक्स-दिशा: स्तंभ;
}

फिर निम्नानुसार App.scss में चर और मिश्रण आयात करें:

@आयात "/ Styles/variables";
@आयात "/ Styles/mixins";

App.scss फ़ाइल में अपने चर और मिश्रण का उपयोग करें:

@आयात "/ Styles/variables.scss";
@आयात "/ Styles/mixins";
.रैपर {
पृष्ठभूमि-रंग: $पृष्ठभूमि-रंग;
रंग: $ टेक्स्ट-रंग;
पैडिंग: $ब्लॉक-पैडिंग;

&__btns {
@शामिल करना खड़ा-सूची;
बटन {
चौड़ाई: $btn-चौड़ाई;
ऊंचाई: $btn-ऊंचाई;
}
}
}

इसी तरह आप रिएक्ट में वेरिएबल और मिक्सिन का उपयोग करते हैं। मिक्सिन्स और वेरिएबल्स के अलावा, आप सैस में अन्य सभी भयानक सुविधाओं का भी उपयोग कर सकते हैं, जैसे फ़ंक्शन। कोई सीमा नहीं है।

React.js में सैस का उपयोग करना

Sass CSS के शीर्ष पर अधिक कार्यक्षमता प्रदान करता है, जो वास्तव में वही है जिसकी आपको पुन: प्रयोज्य CSS कोड लिखने की आवश्यकता होगी।

आप npm या यार्न के माध्यम से sass पैकेज स्थापित करके, अपनी CSS फ़ाइलों को .scss या .sass में अपडेट करके, फिर नए फ़ाइल एक्सटेंशन का उपयोग करने के लिए अपने आयात को अपडेट करके, Sass in React का उपयोग शुरू कर सकते हैं। उसके बाद, आप प्रतिक्रिया में एससीएसएस लिखना शुरू कर सकते हैं।