Style a site using Sass

Sep 12, 2025

कैसे करना है

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

सौभाग्य से, वहां विकल्प हैं जो आपको सीएसएस को संकलित करने वाली अन्य भाषाओं का उपयोग करने की अनुमति देते हैं। 'प्रीप्रोसेसर' के रूप में जाना जाता है, ये टूल आपकी वेब बिल्ड प्रक्रिया में एकीकृत होते हैं और आपके द्वारा चुने गए एक्सटेंशन भाषा से उपयोग करने योग्य शैली की चादरें उत्पन्न करते हैं।

एसएएसएस (सिंटेक्टिक रूप से भयानक स्टाइल शीट्स) इन विकल्पों में से सबसे लोकप्रिय है - हमारी मार्गदर्शिका के साथ और पढ़ें [2 9] सास क्या है?

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

[2 9] शांत सीएसएस एनिमेशन को फिर से बनाने के लिए

[3 9]

एसएएसएस के लिए वास्तव में दो अलग-अलग वाक्यविन्यास हैं, जो एक .scss फ़ाइल एक्सटेंशन का उपयोग करता है, और एक जो का उपयोग करता है। पूर्व सीएसएस की तरह दिखता है (वास्तव में, सभी .css फ़ाइलें मान्य हैं .sss फ़ाइलें), जबकि बाद में सीएसएस के ब्रैकेट और अर्धविरन को इंडेंटेशन और न्यूलाइन के पक्ष में समाप्त कर देता है। हम .scss पर ध्यान केंद्रित करेंगे, लेकिन पसंद व्यक्तिगत वरीयता के लिए बस नीचे है। आपकी साइट को अपग्रेड करना? सुनिश्चित करें कि आपका वेब होस्टिंग सेवा वह करता है जो आपको इसकी आवश्यकता है, और अपने प्राप्त करें घन संग्रहण ठीक भी।

यहां इस ट्यूटोरियल के लिए फ़ाइलें डाउनलोड करें (अंक 282) [4 9]

Sass website screenshot — सैस वेबसाइट में बहुत उपयोगी दस्तावेज हैं [6 9]

01. कंपाइलर सेट करें

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

brew install sass/sass/sass

02. एक SASS फ़ाइल बनाएं

आइए कंपाइलर को कार्रवाई में देखने के लिए एक साधारण एसएएस फ़ाइल बनाने का प्रयास करें। एसएएसएस में सबसे सरल अवधारणाओं में से एक चर है, जिसे एक बार निर्दिष्ट किया जा सकता है $ उपसर्ग और फिर अपने कोड में उपयोग किया जाता है। हम बनाएँगे sass-input.scss ।

 $ पाठ-रंग: #cccccc;
तन {
    रंग: $ पाठ-रंग;
}

03. कमांड लाइन संकलन

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

[9 7] सास sass-input.scss css-output.css

04. अपने बिल्ड को स्वचालित करें

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

[9 7] mkdir src mkdir src / sass mkdir सार्वजनिक एमकेडीआईआर पब्लिक / सीएसएस SASS --WATCH SRC / SASS /: सार्वजनिक / CSS /

05. सैस स्टाइल के साथ खेलो

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

[9 7] सीडी सार्वजनिक curl -o index.html https: // रॉ। githubusercontent.com/simon-a-j/sass- ट्यूटोरियल / मास्टर / पब्लिक / इंडेक्स.एचटीएमएल

06. मुख्य स्टाइलशीट

हम अपने मुख्य सीएसएस प्रविष्टि बिंदु के रूप में styles.css का उपयोग कर रहे हैं, जो बाद में हम अन्य मॉड्यूल आयात करने के लिए उपयोग करेंगे। इसका मतलब यह है कि हमें इस फ़ाइल को उत्पन्न करने के लिए एसएएसएस को बताने की जरूरत है, इसलिए हमें अपने एसआरसी / एसएएसएस फ़ोल्डर में एक styles.scss फ़ाइल बनाने की भी आवश्यकता है। यदि आप चल रहे हैं sass --watch पहले के रूप में, यह स्वचालित रूप से सीएसएस में संकलित किया जाएगा सार्वजनिक / सीएसएस फ़ोल्डर, और ताज़ा करने की आपकी साइट अपने बदलाव दिखाएगी। जैसे ही आप जाते हैं ब्राउज़र में कुछ संशोधन और HTML पृष्ठ को रीफ्रेश करने का प्रयास करें।

 // styles.scss
तन {
  फ़ॉन्ट-परिवार: सैन्स-सेरिफ़;
  पाठ-संरेखण: केंद्र;
}

07. रंग योजना प्रबंधित करें

Sass website with a colour scheme of blue — अब एक रंग की योजनाएं एक सैस आंशिक के लिए धन्यवाद [6 9]

आइए देखें कि कैसे एसएएसएस साइट के लिए रंग योजना का प्रबंधन करने में हमारी मदद कर सकता है। वेबपृष्ठ के लिए पांच या छह रंगों का पैलेट होना आम बात है। हम इनमें इनपुट कर सकते हैं _colours.scss । अंडरस्कोर उपसर्ग एसएएसएस को एक नई एचटीएमएल फ़ाइल (एक 'आंशिक') में संकलित करने के लिए नहीं बताता है। लेकिन हम इसे थोड़ा अलग तरीके से उपयोग कर सकते हैं।

 // _colours.scss
$ रंग-प्राथमिक: # 231651;
$ रंग-माध्यमिक: # 2374AB;
$ रंग-प्रकाश: # D6FFF6;
$ रंग-हाइलाइट 1: # 4 डीसीसीबीडी;
$ रंग-हाइलाइट 2: # एफएफ 8484;

08. रंग चर का प्रयोग करें

इन रंग चर का उपयोग करने के लिए हमने अभी स्थापित किया है, हम सामग्री को आयात करने के लिए एसएएसएस बता सकते हैं _colours.scss हमारी मुख्य शैली शीट में। हम इसका उपयोग करके ऐसा करते हैं @आयात बयान। एक बार ऐसा करने के बाद, ध्यान दें कि आउटपुट सीएसएस फ़ाइल के भीतर चर कैसे हल किए जाते हैं।

 // styles.scss
@ आयात "_colours.scss";
तन {
  फ़ॉन्ट-परिवार: सैन्स-सेरिफ़;
  पाठ-संरेखण: केंद्र;
  पृष्ठभूमि: रैखिक-ढाल (155 डिग्री,
$ रंग-प्राथमिक 70%, $ रंग-माध्यमिक
70%);
  रंग: $ रंग-प्रकाश;
  न्यूनतम ऊंचाई: 100 वीएच;
}
H1 {
    रंग: $ रंग-हाइलाइट 1;
}
H2 {
  रंग: $ रंग-हाइलाइट 2;
}

09. घोंसला शैलियाँ

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

 ए {
  रंग: $ रंग-माध्यमिक;
}
.प्रोफाइल-हेडर {
  ए {
    फ़ॉन्ट आकार: 16px;
    मार्जिन-बाएं: 10px;
    मार्जिन-राइट: 10 पीएक्स;
    पैडिंग: 10 पीएक्स;
    सीमा-त्रिज्या: 5 पीएक्स;
    रंग: $ रंग-प्रकाश;
    पृष्ठभूमि-रंग: $ रंग-माध्यमिक;
  }
}

10. उत्तरदायी ग्रिड बनाएं

Sass site with grid — एक उत्तरदायी ग्रिड सैस चर और घोंसले के साथ प्रबंधन करना आसान है [6 9]

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

 $ ब्रेकपॉइंट: 800px;
.प्रोफाइल-बॉडी {
  प्रदर्शन: फ्लेक्स;
  संरेखित आइटम: खिंचाव;
  औचित्य-सामग्री: अंतरिक्ष के आसपास;
  मार्जिन-टॉप: 32 पीएक्स;
  मार्जिन-बाएं: 10vw;
  मार्जिन-दाएं: 10vw;
  @media स्क्रीन और (अधिकतम चौड़ाई:
$ ब्रेकपॉइंट) {
      फ्लेक्स-दिशा: कॉलम;
  }
}
.profile- अनुभाग {
  पृष्ठभूमि-रंग: $ रंग-हाइलाइट 1;
  रंग: $ रंग-प्राथमिक;
  मार्जिन: 16px;
  सीमा-त्रिज्या: 10px;
  चौड़ाई: 340px;
  .profile- सामग्री {
    पैडिंग: 20 पीएक्स;
  }
  @media स्क्रीन और (अधिकतम चौड़ाई:
$ ब्रेकपॉइंट) {
    चौड़ाई: 100%;
  }
}

11. मिश्रण का परिचय

[1 9 0] [1 9 1] [1 9 2]

एक मिक्सिन सीएसएस जैसे रोटेशन जैसे ट्रांसफॉर्म का उपयोग करते समय पुराने ब्राउज़र के साथ पिछड़ा संगतता बनाए रखने में मदद करता है [6 9]

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

12. मिक्सिन और चर

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

 $ स्टाइल 1: (अग्रभूमि: $ रंग-प्रकाश,
पृष्ठभूमि: $ रंग-माध्यमिक);
$ स्टाइल 2: (अग्रभूमि: $ रंग-प्राथमिक,
पृष्ठभूमि: $ रंग-हाइलाइट 1);
$ स्टाइल 3: (अग्रभूमि: $ रंग-प्राथमिक,
पृष्ठभूमि: $ रंग-हाइलाइट 2);
@ मिक्सिन सामग्री-शैली ($ अग्रभूमि,
$ पृष्ठभूमि) {
  रंग: $ अग्रभूमि;
  पृष्ठभूमि-रंग: $ पृष्ठभूमि;
}

13. अपने नए मिक्सिन का प्रयोग करें

। प्रोफाइल-हेडर {
  ए {
    @ कंटेंट-स्टाइल ($ स्टाइल 1 ...);
    // ...
  }
}
.profile- अनुभाग {
    @ कंटेंट-स्टाइल ($ स्टाइल 2 ...);
  // ...
}

14. विरासत को समझें

सैस की एक और शक्तिशाली विशेषता विरासत है। अभी हमारे पेज में लिंक के लिए दो अलग-अलग शैलियों हैं। यदि हम सीएसएस की प्रतिलिपि बनाने और चिपकाने के बजाय दोनों में सामान्य शैलियों का उपयोग करना चाहते हैं, तो हम प्लेसहोल्डर क्लास का उपयोग क्यों नहीं करते हैं, '%' के साथ दर्शाए गए हैं, जिसे दोनों द्वारा बढ़ाया जा सकता है, जिससे उन्हें अपनी शैलियों का वारिस किया जा सकता है?

% लिंक साझा {
  फ़ॉन्ट आकार: 16px;
  मार्जिन-बाएं: 10px;
  मार्जिन-राइट: 10 पीएक्स;
  पैडिंग: 10 पीएक्स;
  सीमा-त्रिज्या: 10px;
}

15. कक्षाओं का विस्तार करें

अब हम अपनी साइट पर लिंक स्टाइल को परिभाषित करने के लिए लिंक-साझा वर्ग का विस्तार कर सकते हैं। यह काफी सुरुचिपूर्ण दिखना शुरू कर रहा है। हम परिभाषित करते हैं कि एक लिंक आमतौर पर एक बार कैसा दिखता है, इसे पूरे रूप में पुन: उपयोग करें, और मिश्रण का उपयोग करके प्रत्येक लिंक के लिए पैलेट से रंग निर्दिष्ट करें।

। प्रोफाइल-हेडर {
  ए {
    @extend% लिंक साझा;
    @ कंटेंट-स्टाइल ($ स्टाइल 1 ...);
  }
}
ए {
  @extend% लिंक साझा;
  @ कंटेंट-स्टाइल ($ स्टाइल 3 ...);
}

16. विषय को संशोधित करें

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

 // _colours.scss
$ रंग-प्राथमिक: # 2E1F27;
$ रंग-माध्यमिक: हल्का ($ रंग-प्राथमिक,
25%);
$ रंग-प्रकाश: हल्का ($ रंग-प्राथमिक,
75%);
$ रंग-हाइलाइट 1:
हल्का (पूरक ($ रंग-प्राथमिक), 50%);
$ रंग-हाइलाइट 2:
हल्का (पूरक ($ रंग-माध्यमिक), 50%);

17. रंगों का एक नया सेट चुनें

अब, हम साइट के लिए पूरी रंग योजना को केवल एक नया रंग-प्राथमिक मान निर्दिष्ट करके संशोधित कर सकते हैं _colours.scss फ़ाइल। वैकल्पिक रंगों के साथ प्रयोग करके इसे आज़माएं। हम एसएएसएस को यादृच्छिक भी कर सकते थे (लेकिन याद रखें कि यह उस बिंदु को संदर्भित करता है जिस पर आपकी साइट का निर्माण किया जाता है, रनटाइम नहीं)। आप प्राथमिक से विषय में अन्य रंगों को प्राप्त करने के लिए उपयोग कर रहे तर्क को समायोजित करने का भी प्रयास कर सकते हैं।

 $ लाल: यादृच्छिक (255);
$ हरा: यादृच्छिक (255);
$ नीला: यादृच्छिक (255);
$ रंग-प्राथमिक: आरजीबी ($ लाल, $ हरा, $ नीला);

18. पुस्तकालयों का उपयोग करें

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

 गिट क्लोन https://github.com/josephfusco/
Angled- edges.git src / sass / angled- किनारों

19. कोण वाले किनारों का मिश्रण

हम एंगल्ड किनारों को उसी तरह आयात कर सकते हैं जिस तरह हमने अपनी रंग योजना आंशिक के लिए किया था। यह तब एक मिश्रण के माध्यम से प्रयोग योग्य है जो पुस्तकालय के साथ जहाजों। आइए इसे हमारे प्रोफ़ाइल-सेक्शन क्लास में आज़माएं।

 @ आयात "कोण-किनारों / _angled-edges.scss";
.profile- अनुभाग {
  @ innclude angled- किनारे ("नीचे के बाहर",
"निचला दायां", $ रंग-हाइलाइट 1);
  @ innclude एंगल्ड-एज ("शीर्ष के बाहर",
"ऊपरी दाएं", $ रंग-हाइलाइट 1);
  मार्जिन: 120 पीएक्स 16 पीएक्स 120 पीएक्स 16 पीएक्स;
  // ...
}

20. आउटपुट स्वरूपण

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

 एसएएसएस एसआरसी / एसएएसएस /: सार्वजनिक / सीएसएस / --स्टाइल
संपीड़ित

21. अधिक सैस

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

यह लेख मूल रूप से 282 अंक में प्रकाशित किया गया था [4 9] [2 9] वेब डिजाइनर [4 9]

। खरीद [4 9] अंक 282 [4 9] या [4 9] यहां सदस्यता लें [4 9] । [4 9]

अधिक पढ़ें:

[2 9] 10 अद्भुत नई सीएसएस टेक्नोलॉजीज

[2 9] आज की कोशिश करने के लिए 3 चमकदार नई सीएसएस गुण

[2 9] महान लंबन स्क्रॉलिंग वेबसाइटें

[3 9]

Style a site using Sass

01. कंपाइलर सेट करें

02. एक SASS फ़ाइल बनाएं

03. कमांड लाइन संकलन

04. अपने बिल्ड को स्वचालित करें

05. सैस स्टाइल के साथ खेलो

06. मुख्य स्टाइलशीट

07. रंग योजना प्रबंधित करें

08. रंग चर का प्रयोग करें

09. घोंसला शैलियाँ

10. उत्तरदायी ग्रिड बनाएं

11. मिश्रण का परिचय

12. मिक्सिन और चर

13. अपने नए मिक्सिन का प्रयोग करें

14. विरासत को समझें

15. कक्षाओं का विस्तार करें

16. विषय को संशोधित करें

17. रंगों का एक नया सेट चुनें

18. पुस्तकालयों का उपयोग करें

19. कोण वाले किनारों का मिश्रण

20. आउटपुट स्वरूपण

21. अधिक सैस

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to create water simulations

Tackle portrait painting with oils

How to combine 3D and comic art in ZBrush

Fashion flexible layouts with CSS Grid

Sharpen your hard-surface modelling in 3ds Max

Design a responsive site with em-based sizing

How to create a retro logo with Affinity Designer

Create interactive charts in Ionic 2

श्रेणियाँ