प्रीप्रोसेसर सीएसएस: सिंहावलोकन, चयन, आवेदन

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

कैसे सीएसएस पूर्वप्रक्रमक किया

बेहतर इस तकनीक की विशेषताओं को समझने के लिए, कुछ समय के लिए वेब पृष्ठों की दृश्य प्रस्तुति के इतिहास में तल्लीन।

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

1994 में, नार्वे वैज्ञानिक Håkon झूठ एक शैली पत्रक है कि HTML दस्तावेज़ से अलग पृष्ठों की उपस्थिति के लिए इस्तेमाल किया जा सकता का विकास किया। W3C, जो तुरंत पूरा करने निकल पड़े के विचार priglanulas सदस्य हैं। कुछ साल बाद वह सीएसएस विनिर्देश का पहला संस्करण प्रकाशित किया। फिर वह लगातार सुधार को अंतिम रूप दिया जा रहा है ... लेकिन अवधारणा सभी एक ही बने रहे: प्रत्येक शैली कुछ गुण निर्धारित किया है।

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

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

शुरुआती के लिए सीएसएस: पूर्वप्रक्रमक सुविधाओं

वे कई कार्य होते हैं:

• ब्राउज़र उपसर्गों और खाकी को एकजुट;

• वाक्य रचना को आसान बनाने;

• त्रुटियों के बिना नेस्टेड चयनकर्ताओं के साथ काम करने का अवसर देते हैं;

• तर्क स्टाइल में सुधार होगा।

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

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

लोकप्रिय preprocessors सीएसएस। सास

2007 में बनाया गया है। मूल रूप से एक घटक Haml - एक टेम्पलेट HTML। सीएसएस तत्वों के लिए नई सुविधाएँ रूबी ऑन रेल्स है, जो इसे हर जगह प्रसार शुरू किया पर पसंद आया डेवलपर्स नियंत्रित करते हैं। सास सुविधाओं है कि अब किसी भी पूर्वप्रक्रमक में शामिल किए गए हैं की एक बड़ी संख्या: चर, चयनकर्ताओं की embedding, hagfish (तब, हालांकि, इन तर्कों में नहीं जोड़ा जा सकता है)।

सास में घोषणा चर

चर $ साइन के साथ की घोषणा की। वे उदाहरण के लिए, उनके गुणों और सेट बनाए रख सकते हैं: "$ borderSolid: 1px ठोस लाल,"। इस उदाहरण में, हम एक चर borderSolid कहा जाता है की घोषणा की और यह 1px ठोस लाल मूल्य बचा लिया। अब, अगर सीएसएस में हम 1px की एक लाल बॉर्डर चौड़ाई बनाने की जरूरत है, बस संपत्ति के नाम के बाद उस चर इंगित करता है। चर की घोषणा के बाद बदला नहीं जा सकता। वहाँ कई बिल्ट-इन कार्य कर रहे हैं। उदाहरण के लिए, $ redcolor # FF5050 का एक मूल्य के साथ एक चर घोषणा करते हैं। p {रंग:: अब, किसी भी तत्व के गुणों में सीएसएस कोड में, यह फ़ॉन्ट रंग सेट करने के लिए उपयोग करें $ redColor; }। आप रंग के साथ प्रयोग करना चाहते हैं? समारोह को गहरा का प्रयोग करें या हल्का। यह इसलिए किया जाता है: p {रंग: काला कर ($ redColor, 20%); }। नतीजतन, रंग redColor 20% हल्का हो जाएगा।

सास कई अंतर्निहित कार्य करता है। वर्थ कम से कम उन्हें पढ़ते हैं, लेकिन बेहतर - जानने के लिए।

घोंसला करने की क्रिया

इससे पहले, घोंसले से संकेत मिलता है एक लंबी और असहज डिजाइन का इस्तेमाल किया था। कल्पना कीजिए कि हम एक div, जो पी है, और उस में, बारी में, सेट अवधि। , पीले अवधि के लिए - - div के लिए, हम पी के लिए लाल फ़ॉन्ट रंग सेट करने के लिए, की जरूरत है गुलाबी। एक ठेठ सीएसएस में यह इस प्रकार से किया जाना होगा:

div {

रंग: लाल;

}

div p {

रंग: पीला;

}

div पी अवधि {

रंग: गुलाबी;

}

सीएसएस पूर्वप्रक्रमक के साथ सब आसान और अधिक कॉम्पैक्ट हो जाता है:

div {

रंग: लाल;

p {

रंग: पीला;

.span {

रंग: गुलाबी;

}

}

}

तत्वों सचमुच एक दूसरे के "निवेश"।

पूर्वप्रक्रमक निर्देशों

@import निर्देशों का उपयोग करना फ़ाइलें आयात कर सकते हैं। उदाहरण के लिए, हम fonts.sass फ़ाइल कि फोंट के लिए शैलियों की घोषणा की है। यह मुख्य फ़ाइल style.sass से जोड़ना: @import 'फोंट'। हो गया! शैलियों के साथ एक बड़ी फ़ाइल के बजाय हम कुछ है कि आवश्यक गुण के लिए त्वरित और आसान पहुंच के लिए इस्तेमाल किया जा सकता है।

hagfish

सबसे दिलचस्प विचारों में से एक। यह गुण का एक सेट पूछने के लिए एक लाइन की अनुमति देता है। इस प्रकार के रूप में कार्य:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish पृष्ठ पर तत्व को लागू करने के लिए, निर्देश @include का उपयोग करें। उदाहरण के लिए, हम h1 हेडर के लागू करना चाहते हैं। एच 1 {@include: हम निम्नलिखित संरचना है largeFont; }

सभी hagfish के गुणों एक H1 तत्व सौंपा है।

पूर्वप्रक्रमक कम

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

चर @ प्रतीक का उपयोग घोषित कर रहे हैं। उदाहरण के लिए: @fontSize: 14px;। सास के रूप में एक ही सिद्धांत पर काम करता है नेस्टिंग। .largeFont () {font-family:: hagfish इस प्रकार की घोषणा कर रहे हैं 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }। अभी-अभी चयनित तत्व के गुणों में नव निर्मित hagfish जोड़ने - यह पूर्वप्रक्रमक निर्देशों का उपयोग करना आवश्यक नहीं है कनेक्ट करने के लिए। उदाहरण के लिए: h1 {.largeFont; }।

लेखनी

एक और पूर्वप्रक्रमक। एक ही लेखक, कि दुनिया जेड, एक्सप्रेस और अन्य उपयोगी उत्पादों दिया द्वारा 2011 में बनाया गया।

चर दो तरह से घोषित किया जा सकता - या तो स्पष्ट या परोक्ष। उदाहरण के लिए: फ़ॉन्ट = 'Times New Roman'; - एक अंतर्निहित विकल्प। लेकिन $ फ़ॉन्ट = 'Times New Roman' - स्पष्ट। Hagfish घोषित किया गया है और परोक्ष जुड़ा हुआ है। redColor () रंग लाल: वाक्य रचना इस प्रकार है। अब हम उदाहरण के लिए, आइटम जोड़ सकते हैं: h1 redColor ();।

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

क्या पूर्वप्रक्रमक चुनें?

वास्तव में, यह है ... यह कोई फर्क नहीं पड़ता। सभी संस्करणों में एक ही सुविधाओं के बारे में की पेशकश बस प्रत्येक की वाक्य रचना अलग है। हम इस प्रकार आगे बढ़ने के लिए सलाह देते हैं:

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

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