🕵🏾 🐸 😚 वेब पेज स्टाइल विकसित करने के तरीके और उपकरण 🐩 🙍🏿 🤜🏿

चलो बुश के आसपास नहीं हराते हैं, चलो इसे सामना करते हैं: अच्छा सीएसएस कोड लिखने की प्रक्रिया बहुत, बहुत मुश्किल हो सकती है। कई डेवलपर्स शैलियों के साथ गड़बड़ नहीं करना चाहते हैं। वे कुछ भी करने के लिए तैयार हैं, लेकिन सीएसएस नहीं।

सामग्री के लेखक, जिसका अनुवाद आज हम आपके ध्यान में ला रहे हैं, का कहना है कि वह खुद वेब विकास के उस हिस्से को पसंद नहीं करता था जो सीएसएस से संबंधित है। लेकिन इसके आस-पास कोई नहीं है। आजकल, डिजाइन पर बहुत ध्यान दिया जाता है, और जिसे "उपयोगकर्ता अनुभव" कहा जाता है, लेकिन आप सीएसएस के बिना नहीं कर सकते। इस सामग्री का उद्देश्य वेब पेज शैलियों को विकसित करने और लागू करने में अपने कौशल को बेहतर बनाने में सभी की मदद करना है।

सीएसएस मुद्दों

एक नई परियोजना की शुरुआत में, शैलियों आमतौर पर सरल और स्पष्ट दिखती हैं। कहते हैं कि बहुत कम CSS चयनकर्ता हैं, जैसे .title , input , #app , जिसके साथ काम करना मुश्किल नहीं होगा।

लेकिन, जैसे-जैसे एप्लिकेशन बढ़ता है, शैलियाँ एक बुरे सपने में बदल जाती हैं। डेवलपर सीएसएस चयनकर्ताओं के बारे में भ्रमित होने लगता है। उसे पता चलता है कि वह div#app .list li.item a जैसी कुछ लिखता है। हालांकि, काम को रोका नहीं जा सकता है, इसलिए प्रोग्रामर समान निर्माणों का उपयोग करना जारी रखता है, फ़ाइल के अंत में सीएसएस कोड को कहीं न कहीं धक्का दिया जाता है। और वास्तव में - जो शैलियों में रुचि रखते हैं? और CSS ही ऐसी बकवास है ... परिणाम पूरी तरह से असमर्थित, भयानक CSS की 500 लाइनें है।

मैं चाहूंगा कि आप इस लेख को पढ़ें और अपनी पिछली परियोजनाओं को देखें और सोचें: "ठीक है, वाह, मैं यह कैसे लिख सकता हूं?"

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

अक्सर उनके उपयोग से एक उबाऊ, नीरस, केले के डिजाइन की उपस्थिति होती है।
फ्रेमवर्क की शैलियों को अनुकूलित करना कठिन है, और कुछ ऐसा करने की आवश्यकता है जो फ्रेमवर्क के ढांचे से परे हो।
फ्रेमवर्क, उनका उपयोग करने से पहले, अध्ययन किया जाना चाहिए।

और, अंत में, आप इसे एक निश्चित ढांचे के साथ परिचित करने के लिए नहीं पढ़ रहे हैं? तो चलिए CSS का काम करते है। मैं तुरंत ध्यान देना चाहूंगा कि सामग्री अनुप्रयोगों के लिए सुंदर डिजाइन बनाने के बारे में नहीं है। यह गुणवत्ता सीएसएस लिखने के बारे में है जिसे बनाए रखना आसान है, और इसे सही तरीके से कैसे व्यवस्थित किया जाए।

एससीएसएस

मेरे उदाहरण में, मैं एससीएसएस का उपयोग करूंगा। यह एक CSS प्रीप्रोसेसर है। वास्तव में, SCSS CSS का सुपरसेट है। इसमें कुछ बहुत ही रोचक विशेषताएं हैं, जैसे कि चर, नेस्टेड निर्माण, फ़ाइल आयात, मिश्रण। हम SCSS सुविधाओं पर चर्चा करेंगे जिनका हम उपयोग करेंगे।

▍Peremennye

SCSS में, आप चर का उपयोग कर सकते हैं। चर का उपयोग करने का मुख्य लाभ उनके पुन: उपयोग की संभावना है। कल्पना कीजिए कि हमारे पास एप्लिकेशन के लिए रंगों का एक सेट है। मुख्य रंग नीला है। नतीजतन, यह रंग शाब्दिक रूप से हर जगह लागू होता है। इसका उपयोग बटन की background-color संपत्ति में, पृष्ठ शीर्षक की color संपत्ति में, और कई अन्य स्थानों में किया जाता है।

और फिर, अचानक, आप नीले को हरे रंग में बदलने का फैसला करते हैं। यदि आप वैरिएबल का उपयोग किए बिना ऐसा प्रतिस्थापन करते हैं, तो आपको सभी कोड, सभी लाइनों को संपादित करना होगा जहां पुराने रंग का उपयोग किया जाता है। यदि आप एक चर का उपयोग करते हैं, तो आपको केवल इसके मूल्य को बदलना होगा। यहाँ चर का उपयोग कैसा दिखता है:

 //   $primary-color: #0099ff; //   h1 { color: $primary-color; }

▍ नेस्टेड निर्माण

SCSS नेस्टेड कंस्ट्रक्शन को सपोर्ट करता है। यहाँ नियमित सीएसएस है:

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; }

नेस्टेड निर्माणों के समर्थन के लिए धन्यवाद, इसे निम्नानुसार रूपांतरित किया जा सकता है:

 h1 { font-size: 5rem; color: blue; span {   color: green; } }

यह विकल्प पढ़ना बहुत आसान है, है ना? इसके अलावा, नेस्टेड निर्माणों के उपयोग के माध्यम से, जटिल चयनकर्ताओं को बनाने का समय कम हो जाता है।

RagFragmentation और आयात

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

शैली विवरण के टुकड़े युक्त फाइलें उनके नाम की शुरुआत में अंडरस्कोर जोड़कर बनाई जा सकती हैं: _animations.scss , _base.scss , _variables.scss , और इसी तरह।

इन फ़ाइलों को आयात करने के लिए @import निर्देश का उपयोग किया जाता है। इस तंत्र का उपयोग कैसे करें:

 //  _animations.scss @keyframes appear { 0% {   opacity: 0; } 100% {   opacity: 1; } } //  header.scss @import "animations"; h1 { animation: appear 0.5s ease-out; }

आपको लग सकता है कि इस कोड में कोई त्रुटि है। दरअसल, हम जिस फ़ाइल को आयात करना चाहते हैं, उसे _animations.scss कहा जाता है, और हम, header.scss फ़ाइल में, @import "animations" कमांड का उपयोग करते हैं। हालांकि, कोई गलती नहीं है। SCSS यह समझने के लिए एक स्मार्ट पर्याप्त प्रणाली है कि ऐसी स्थिति में, डेवलपर का अर्थ है संबंधित फ़ाइल।

यह हम सभी को चर, नेस्टेड निर्माण, शैलियों के विखंडन और आयात के बारे में जानने की आवश्यकता है। @for में अन्य संभावनाएं हैं, जैसे कि मिक्सिन्स, इनहेरिटेंस, और अन्य निर्देश (उनमें से @for , @if और कुछ अन्य हैं), लेकिन हम यहां उनके बारे में बात नहीं करेंगे।

यदि आप SCSS को बेहतर तरीके से जानना चाहते हैं, तो संबंधित दस्तावेज देखें ।

सीएसएस संगठन: बीईएम पद्धति

मुझे याद नहीं है कि मैंने कितनी बार CSS कक्षाओं के नामकरण के लिए सार्वभौमिक शब्दों का उपयोग किया है। नतीजतन, मुझे ऐसे नाम मिले, मुझे लगता है, हर किसी के लिए परिचित: .custom-input , .custom-input .page-2 , .custom-input .page-2 , .custom-input ।

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

BEM पद्धति (ब्लॉक, तत्व, संशोधक) वेब विकास के लिए एक घटक दृष्टिकोण है। विशेष रूप से, यह एक इकाई नामकरण सम्मेलन है। यह कार्यप्रणाली आपको कोड की संरचना करने की अनुमति देती है, इसे मॉड्यूल में तोड़ने में मदद करती है, और इसके पुन: उपयोग में मदद करती है। चलो ब्लॉक, तत्वों और संशोधक के बारे में बात करते हैं।

▍ ब्लॉक

ब्लॉक को घटक के रूप में माना जा सकता है। निश्चित रूप से आप लेगो में एक बच्चे के रूप में खेले। इसलिए, टाइम मशीन को चालू करें।

आप एक साधारण घर कैसे बनाते हैं, कहते हैं? यहां आपको एक खिड़की, छत, दरवाजे, दीवारों की आवश्यकता होगी, और, सामान्य तौर पर, यह पर्याप्त है। ये सब हमारे ब्लॉक हैं। वे अपने आप में महत्वपूर्ण हैं।

नामकरण: ब्लॉक नाम - .block

उदाहरण: .card , .form , .post , .form .user-navigation

▍ तत्व

लेगो विंडो कैसे बनाएं? शायद, कुछ क्यूब्स फ़्रेम की तरह दिखते हैं, इसलिए यदि आप इनमें से चार क्यूब्स को जोड़ते हैं, तो आपको एक सुंदर खिड़की मिलती है। ये तत्व हैं। वे ब्लॉक के हिस्से हैं, ब्लॉक बनाने के लिए हमें उनकी आवश्यकता है। हालांकि, ब्लॉकों के बाहर के तत्व बेकार हैं।

नामकरण: + __ + - .block__element

उदाहरण: .post__author , .post__date , .post__text

▍ संशोधक

आपके पास एक विंडो होने के बाद, आप इसे बदलना चाह सकते हैं। उदाहरण के लिए - एक अलग रंग में पेंट करें। आधार ब्लॉक या तत्वों में इस तरह के बदलाव को संशोधक का उपयोग करके किया जाता है। ये ब्लॉक या तत्वों के झंडे हैं, और उनका उपयोग उनके व्यवहार, उपस्थिति और इतने पर बदलने के लिए किया जाता है।

नामकरण: + -- + - .block__element--modifier , .block--modifier
उदाहरण: .post--important , .post__btn--disabled

▍ नोट्स

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

▍Uprazhnenie

यहाँ एक व्यायाम है। उन साइटों को ध्यान से देखें जिन्हें आप पसंद करते हैं, या उन लोगों पर जिन्हें आप अक्सर उपयोग करते हैं, और इस बारे में सोचें कि उन पर क्या ब्लॉक हो सकता है, एक तत्व क्या है, और एक संशोधक क्या है।

उदाहरण के लिए, यहां Google स्टोर के विश्लेषण से मुझे क्या मिला।

साइट विश्लेषण

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

▍ उदाहरण

यहां कोडपेन द्वारा तैयार एक उदाहरण है जो बीईएम की क्षमताओं को प्रदर्शित करता है। यहाँ हम एक निश्चित ब्लॉग में प्रकाशन की तरह कुछ कर रहे हैं। इस उदाहरण के लिए HTML है।

 <div class="post"> <span class="post__author">Thomas</span>     <span class="post__date">3 minutes ago</span> <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sit voluptatem aut quis quisquam veniam delectus sequi maxime ullam, inventore blanditiis quia commodi maiores fuga, facere quaerat doloremque in. Nisi!</p> </div> <div class="post mt-large post--important"> <span class="post__author">Thomas</span>     <span class="post__date">2 hours ago</span> <p class="post__text">Voluptatem incidunt autem consequatur neque vitae aliquam, adipisci voluptatum. Ipsum excepturi dolores exercitationem rem ab similique consequatur nesciunt, tempora aut vel unde.</p> </div>

यहाँ SCSS शैलियाँ हैं:

 .post { display: inline-block; padding: 1rem; background-color: #ccc; border: 1px solid #222; border-radius: 5px; &--important {   background-color: yellow; } &__author {   font-size: 1.2rem;   font-weight: bold;   color: blue; } &__date {   float: right; } &__text {   line-height: 2rem;   font-size: 1.3rem; } } .mt-large { margin-top: 3rem; }

लेकिन अंत में क्या हुआ।

बीईएम का उपयोग करके "प्रकाशन" बनाना

एक अन्य उदाहरण पर विचार करें। यहां, BEM का उपयोग करके, हम बटन बनाते हैं। इस उदाहरण के लिए HTML है।

 <div> <button class="btn">   Click me </button> <button class="btn btn--danger">   Danger </button> <button class="btn btn--success">   Success </button> <button class="btn btn--small">   Small </button> <button class="btn btn--big">   Big </button> <button class="btn btn--border">   Border </button> </div>

यहाँ SCSS शैलियाँ हैं।

 .colors { font-size: 1.5rem; font-family: sans-serif; } .btn {   background-color: #FF6B93;   color: #fff;   text-transform: uppercase;   padding: 1.5rem 2.5rem;   border-radius: 4px;   transition: all .2s;   font-size: 1.3rem;   border: none;   letter-spacing: 2px;   cursor: pointer; &:hover {   background-color: #D15879; } &:focus {   outline: none; } &--danger {   background-color: #FF3B1A;     &:hover {     background-color: #D43116;   } } &--success {   background-color: #00D123;     &:hover {     background-color: #00AB1D;   } } &--small {   padding: 1rem 2rem;   font-size: 1rem; } &--big {   padding: 1.8rem 4.5rem;   font-size: 1.7rem; } &--border {   background-color: #fff;   color: #FF6B93;   border: 1px solid #FF6B93;     &:hover {     background-color: #FF6B93;     color: #fff;   } } }

और यहाँ परिणाम है।

BEM कार्यप्रणाली का उपयोग करते हुए बटन डिजाइन

सीएसएस फाइलों का आयोजन: 7-1 टेम्पलेट

चलो CSS फाइलों को व्यवस्थित करने के बारे में बात करते हैं। हमारी बातचीत के इस हिस्से से आप जो सीखते हैं, वह आपको अधिक उत्पादक रूप से काम करने और उचित परिस्थितियों में मदद करने की अनुमति देगा, तुरंत सीएसएस कोड ढूंढें जिसे बदलने की आवश्यकता है। यह सब प्राप्त करने के लिए, हमें "7-1" टेम्पलेट का अध्ययन करने की आवश्यकता है।

शायद अब यह आपको प्रतीत होगा कि यह टेम्प्लेट किसी तरह बहुत अजीब है। हालांकि, यहां कुछ भी अजीब नहीं है, और इसका उपयोग करना बहुत सरल है। ऐसा करने के लिए, दो सरल नियमों का पालन करना पर्याप्त है:

SCSS अंशों वाली सभी फ़ाइलों को 7 अलग-अलग फ़ोल्डरों में रखा जाना चाहिए।
इन सभी फ़ाइलों को मूल निर्देशिका में स्थित एक फ़ाइल main.scss में आयात किया जाना चाहिए, जिसमें ये सभी फ़ोल्डर स्थित हैं।

परिणामस्वरूप, टेम्पलेट का नाम, "7 फ़ोल्डर - 1 फ़ाइल" के रूप में डिक्रिप्ट किया जा सकता है। जैसा कि आप देख सकते हैं, यह इतना मुश्किल नहीं है। आइए इस टेम्पलेट के बारे में अधिक विस्तार से बात करते हैं।

▍ ▍ फोल्डर

यहाँ प्रश्न में फ़ोल्डर्स हैं:

base : इस फ़ोल्डर में आपको सभी जगह रखने की आवश्यकता है, इसलिए बोलने के लिए, "टेम्पलेट" कोड। यहां "टेम्पलेट" कोड से हमारा मतलब है कि सभी सीएसएस कोड जो आपको एक नया प्रोजेक्ट बनाते समय लिखना होगा। उदाहरण के लिए: टाइपोग्राफिक नियम, एनिमेशन, यूटिलिटीज (यानी, margin-right-large , text-center जैसी कक्षाएं), और इसी तरह।
components : इस फ़ोल्डर का नाम स्पष्ट रूप से इंगित करता है कि इसमें क्या संग्रहीत किया जाएगा। हम पृष्ठों को बनाने के लिए उपयोग किए जाने वाले घटकों की शैलियों के बारे में बात कर रहे हैं। ये बटन, फॉर्म, सभी प्रकार के स्लाइडर्स, पॉप-अप और इतने पर हैं।
layout : इस फ़ोल्डर का उपयोग पेज लेआउट तत्वों की शैलियों को संग्रहीत करने के लिए किया जाता है। यह पृष्ठ का शीर्षक और पाद लेख, नेविगेशन क्षेत्र, पृष्ठ के विभिन्न खंड, ग्रिड, और इसी तरह है।
pages : कभी-कभी किसी प्रोजेक्ट को ऐसे पृष्ठों की आवश्यकता होती है जिनकी अपनी विशिष्ट शैली होती है, जो अन्य पृष्ठों की शैली से भिन्न होती है। ऐसे विशेष पृष्ठों के लिए शैली विवरण इस फ़ोल्डर में आते हैं।
themes : यदि किसी वेब प्रोजेक्ट में अलग-अलग थीम (जैसे कि "डार्क मोड", या "एडमिन") का उपयोग शामिल है, तो उनके लिए शैलियों को यहां रखा जाना चाहिए।
abstracts : सभी प्रकार की सहायक चीजें इस फ़ोल्डर में मिलती हैं - फ़ंक्शन, चर, मिश्रण।
vendors : बाहरी निर्भरता के बिना एक दुर्लभ साइट। इस फ़ोल्डर में ऐसी शैलियाँ हैं जो किसी विशेष साइट को विकसित करने वालों द्वारा नहीं बनाई गई हैं। यहाँ, उदाहरण के लिए, आप फ़ॉन्ट विस्मयकारी परियोजना फ़ाइलों, बूटस्ट्रैप शैलियों, और इस तरह बचा सकते हैं।

IleFile main.scss

यह इस फ़ाइल में है कि उपरोक्त सात फ़ोल्डरों में व्यवस्थित किए गए शैलियों के सभी टुकड़े आयात किए गए हैं। इस फ़ाइल में कुछ इस तरह दिख सकता है:

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer;

मैं इस तथ्य से सहमत नहीं हो सकता कि सात फ़ोल्डरों का यह पूरा डिजाइन काफी बड़ा दिखता है। हालांकि, यह ध्यान दिया जाना चाहिए कि यह वास्तुकला बड़ी परियोजनाओं के लिए डिज़ाइन किया गया है। छोटी परियोजनाओं के लिए, आप टेम्पलेट के अनुकूलित संस्करण "7-1" का उपयोग कर सकते हैं। इस संस्करण की विशेषताएं हैं कि यह कुछ फ़ोल्डरों के बिना कर सकता है। तो, यहां आप link टैग में प्रोजेक्ट के लिए बाहरी से स्टाइलशीट्स के लिंक रखकर vendors फ़ोल्डर को मना कर सकते हैं। इसके अलावा, आप themes फ़ोल्डर के बिना भी कर सकते हैं, क्योंकि, शायद, थीम का उपयोग एक छोटे से वेब एप्लिकेशन में नहीं किया जाएगा। और अंत में, आप pages फ़ोल्डर से छुटकारा पा सकते हैं, क्योंकि इस परियोजना में, सबसे अधिक संभावना है, ऐसे पृष्ठ नहीं होंगे जिनकी शैली सामान्य शैली से बहुत अलग है। नतीजतन, सात फ़ोल्डरों में से, केवल चार ही रहते हैं।

आगे, एक छोटी परियोजना करते हुए, आप दो तरीकों में से एक में जा सकते हैं:

यदि आप "7-1" टेम्पलेट के अवशेषों का उपयोग करना पसंद करते हैं, तो आप फ़ोल्डर abstracts , components , layout और base सहेजते हैं।
यदि आप एक बड़े फ़ोल्डर के साथ प्राप्त करने का निर्णय लेते हैं, तो शैली के टुकड़े के साथ सभी फाइलें, साथ में main.scss फ़ाइल के साथ, इस फ़ोल्डर में आती हैं। यह कुछ इस तरह दिख सकता है:

 sass/ _animations.scss _base.scss _buttons.scss _header.scss ... _variables.scss main.scss

वास्तव में क्या चुनना आपकी प्राथमिकता पर निर्भर करता है।

यहां, यदि आप SCSS का उपयोग करने के विचार से प्रेरित हैं, तो आपके पास इस तरह की शैलियों का उपयोग करने का एक प्रश्न हो सकता है, क्योंकि ब्राउज़र उनका समर्थन नहीं करते हैं। वास्तव में, यह एक अच्छा सवाल है जो हमें SCSS को सीएसएस में संकलित करने के लिए, हमारी बातचीत के अंतिम चरण में ले जाता है।

CSS को SCSS संकलित करना

SCSS कोड को CSS में बदलने के लिए, आपको Node.js प्लेटफ़ॉर्म और NPM (या यार्न ) पैकेज मैनेजर की आवश्यकता होगी।

हम node-sass उपयोग करेंगे, जो हमें .css फ़ाइलों को .css फ़ाइलों को संकलित करने की अनुमति देता है। यह एक कमांड लाइन उपकरण है, इसका उपयोग करना आसान है। अर्थात्, node-sass इस तरह दिखता है:

 node-sass <input> <output> [options]

कई विकल्प यहां उपलब्ध हैं। हम दो पर ध्यान केंद्रित करेंगे:

-w विकल्प आपको एक फ़ोल्डर या फ़ाइल की निगरानी करने की अनुमति देता है। यही है, node-sass कोड में परिवर्तनों का ट्रैक रखेगा, और जब वे होते हैं, तो स्वचालित रूप से सीएसएस में फ़ाइलों को संकलित करते हैं। विकास प्रक्रिया के दौरान यह सुविधा बहुत उपयोगी है।
विकल्प --output-style आउटपुट सीएसएस फ़ाइल की --output-style निर्धारित करता है। कई विकल्प यहां उपलब्ध हैं: nested , expanded , compact , compressed । हम एक समाप्त सीएसएस फ़ाइल बनाने के लिए इस विकल्प का उपयोग करेंगे।

यदि आप एक जिज्ञासु व्यक्ति हैं (मुझे उम्मीद है कि यह मामला है, क्योंकि जिज्ञासा केवल डेवलपर के लाभ के लिए है), तो आप सबसे अधिक संभावना node-sass लिए दस्तावेज को देखने में रुचि रखेंगे।

इसलिए, हमने उपकरणों पर फैसला किया, अब सबसे सरल चीज बनी हुई है। SCSS को CSS में बदलने के लिए, आपको इन चरणों का पालन करने की आवश्यकता है:

प्रोजेक्ट फ़ोल्डर बनाएँ और उस पर जाएँ:

 mkdir my-app && cd my-app

प्रोजेक्ट को प्रारंभ करें:

 npm init

प्रोजेक्ट में node-sass पैकेज जोड़ें:

 npm install node-sass --save-dev

एक index.html फ़ाइल, शैलियाँ फ़ोल्डर, main.scss फ़ाइल बनाएँ:

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss

package.json में निम्नलिखित जोड़ें। package.json फ़ाइल:

 { ... "scripts": {   "watch": "node-sass sass/main.scss css/style.css -w",   "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, ... }

index.html फ़ाइल के head टैग में संकलित CSS फ़ाइल के लिंक को जोड़ें:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html>

वह सब है। अब जब आप प्रोजेक्ट पर काम कर रहे हैं, तो npm run watch और अपने ब्राउज़र में index.html फ़ाइल खोलें। CSS को छोटा करने के लिए, npm run build ।

अतिरिक्त उपयोगिताएँ

▍ इंटरएक्टिव पेज पुनः लोड

आप उत्पादकता बढ़ाने के लिए एक इंटरैक्टिव पेज रीलोड को व्यवस्थित करना चाह सकते हैं। यह index.html मैन्युअल रूप से पुनः लोड करने की तुलना में अधिक सुविधाजनक है। यह कैसे करना है:

live-server पैकेज स्थापित करें (ध्यान दें कि यह विश्व स्तर पर स्थापित है):

 npm install -g live-server

प्रोजेक्ट के आधार पर, npm-run-all पैकेज जोड़ें, जो आपको एक ही समय में कई स्क्रिप्ट चलाने की अनुमति देगा:

 npm install npm-run-all --save-dev

package.json में निम्नलिखित जोड़ें। package.json :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w", }, ... }

अब, npm run start कमांड को निष्पादित करने के बाद, आप प्रोजेक्ट पर काम करने की प्रक्रिया में, पृष्ठ को मैन्युअल रूप से पुनः लोड किए बिना इसमें किए जा रहे बदलावों को तुरंत देखेंगे।

▍ ऑटोप्रेफिक्सर पैकेज

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

साइट के निर्माण के दौरान, प्रोग्रामर कुछ नई सुविधाओं का उपयोग कर सकता है जो सभी ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं हैं। ब्राउज़र उपसर्गों का उद्देश्य क्रॉस-ब्राउज़र वेब अनुप्रयोगों के विकास सहित कई समस्याओं को हल करना है।

ब्राउज़र उपसर्ग के साथ कोड कुछ इस तरह दिखता है:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation;

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

हम सभी SCSS फ़ाइलों को एक मुख्य CSS फ़ाइल में संकलित करते हैं।
इस फ़ाइल में ब्राउज़र उपसर्गों को autoprefixer का उपयोग करके autoprefixer ।
इस CSS फ़ाइल को संपीड़ित करें।

यह, सामान्य रूप से, परियोजना पर काम का अंतिम चरण है। तो यहाँ है कि आप autoprefixer का उपयोग करने के लिए क्या करने की जरूरत है:

परियोजना में दो निर्भरताएँ जोड़ें - postcss-cli autoprefixer और autoprefixer :

 npm install autoprefixer postcss-cli --save-dev

निम्न कोड को package.json जोड़ें और build स्क्रिप्ट को संशोधित करें:

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w",   "compile": "node-sass sass/main.scss css/style.css",   "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",   "compress": "node-sass css/style.css css/style.css --output-style compressed",   "build": "npm-run-all compile prefix compress" ... }

npm run build , CSS-, . , , . — , , .

, ,

परिणाम

, CSS, , , CSS-, , .

प्रिय पाठकों! -?

वेब पेज स्टाइल विकसित करने के तरीके और उपकरण