Preprocessor CSS: अवलोकन, चयन, आवेदन

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

कसरी CSS preprocessor गरे

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

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

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

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

त्यसपछि दुई thousandth आए। चिह्नों झन् लचिलो र गतिशील काम शैलीहरू हुन महत्त्वपूर्ण छ जो व्यावसायिक अगाडि अन्तमा विकासकर्ताहरूले, मा संलग्न गर्न थाले छन्। समय माग CSS उपसर्गको नियुक्ति मा अस्तित्व र समर्थन ब्राउजरको नयाँ क्षमताहरु ट्रयाक हुँदै। त्यसपछि, जाभास्क्रिप्ट द्वारा, र माणिक विशेषज्ञहरु तल व्यापार गर्न, पायो एक preprocessor सिर्जना - CSS लागि superstructure, नयाँ सुविधाहरू यो थपिएका छन्।

सिकारुहरूको लागि CSS: preprocessor सुविधाहरू

तिनीहरूले धेरै कार्यहरु छन्:

• ब्राउजर उपसर्गको र खाकी एकताबद्ध;

• विन्यास सरल;

• त्रुटिहरू बिना नेस्ट चयनकर्ताहरूमा काम गर्ने मौकाको;

• तर्क स्टाइल सुधार।

छोटो मा: preprocessor CSS कार्यक्रम तर्क क्षमताहरु थप्छ। चर, कार्य, hagfish, चक्र अवस्था: अब, स्टाइल शैलीहरू सामान्य सूचीकरण र केही सरल प्रविधी र तरीकाहरु संग प्रदर्शन छैन। साथै, गणित प्रयोग गर्न सक्ने क्षमता।

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

लोकप्रिय preprocessors CSS। उद्धतता

2007 मा डिजाइन। मूलतः एक घटक Haml - एक टेम्पलेट HTML। CSS तत्वहरूका लागि नयाँ सुविधाहरू चारैतिर फैलाउन थाले जो पटरियों मा रूबी, मा relished विकासकर्ताहरूले नियन्त्रण। को उद्धतता अब कुनै पनि preprocessor मा समावेश छन् भनेर सुविधाहरू एक विशाल संख्या: चर, चयनकर्ताहरूमा को इम्बेड, hagfish (त्यसपछि तथापि, यी तर्क थप गर्न सकिँदैन)।

उद्धतता मा चर घोषणा

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

को उद्धतता धेरै कार्यहरु निर्मित। सिक्न - लायक कम्तिमा तिनीहरूलाई पढ्न, तर राम्रो।

नेस्टिङ

पहिले, नेस्टिङ संकेत लामो र असहज डिजाइन प्रयोग गर्न भएको थियो। हामी पी छ जो एक div, कि कल्पना, र यो मा, बारी मा, span सेट। पहेंलो, को span लागि - - गुलाबी को div लागि, हामी फन्ट रंग पृ लागि, रातो सेट गर्न आवश्यक छ। एक विशिष्ट CSS मा यो निम्नानुसार गरेको थियो:

div {

रंग: रातो;

}

div पृ {

रंग: पहेंलो;

}

div पृ span {

रंग: गुलाबी;

}

CSS preprocessor सबै सजिलो र थप संकुचित हुन्छ:

div {

रंग: रातो;

पी {

रंग: पहेंलो;

.span {

रंग: गुलाबी;

}

}

}

तत्व शाब्दिक एक अर्को "निवेश"।

preprocessor निर्देशनहरू

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

hagfish

एक भन्दा रोचक विचार को। यो एक लाइन गुण को एक सेट सोध्न गर्न अनुमति दिन्छ। निम्नानुसार सञ्चालन:

@mixin largeFont {

फन्ट-परिवार: 'टाइम्स न्यू रोमन';

font-size: 64px;

लाइन उचाई: 80px;

फन्ट-वजन: साहसिक;

}

पृष्ठ मा तत्व लागू गर्न Hagfish, को निर्देशन @include प्रयोग गर्नुहोस्। उदाहरणका लागि, हामी H1 हेडर यसलाई लागू गर्न चाहन्छु। H1 {@include: हामीले निम्न संरचना छ largeFont; }

hagfish सबै गुण एक H1 तत्व काम तोकिएको छ।

preprocessor कम

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

यो चर को @ प्रतीक प्रयोग घोषणा गर्दै हुनुहुन्छ। उदाहरणका लागि: @fontSize: 14px;। उद्धतता मा जस्तै सिद्धान्तहरूमा नेस्टिङ काम गर्दछ। .largeFont () {फन्ट-परिवार: निम्नानुसार Hagfish घोषणा 'टाइम्स न्यू रोमन'; font-size: 64px; लाइन उचाई: 80px; फन्ट-वजन: साहसिक; }। बस चयन तत्व को गुण मा भर्खरै सिर्जना hagfish थप्न - यो preprocessor निर्देशनहरू प्रयोग गर्न आवश्यक छैन जडान गर्न। उदाहरणका लागि: H1 {.largeFont; }।

लेखनी

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

चर दुई तरिकामा घोषणा गर्न सकिन्छ - या त स्पष्ट रूपमा वा implicitly। उदाहरणका लागि: फन्ट = 'टाइम्स न्यू रोमन'; - एक निहित विकल्प। तर $ फन्ट = 'टाइम्स न्यू रोमन' - स्पष्ट। Hagfish घोषणा गर्दै छन् र implicitly जडान। redColor () रंग रातो: विन्यास रूपमा निम्नानुसार छ। H1 redColor ();: अब हामी वस्तु उदाहरणका लागि, थप्न सक्नुहुन्छ।

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

के preprocessor चयन?

वास्तवमा, यो छ ... यो कुरा छैन। सबै संस्करण भर्खरै प्रत्येक विन्यास फरक छ नै सुविधाहरूको बारेमा प्रस्ताव। हामी निम्नानुसार अगाडि बढ्न सुझाव दिन्छौं:

• यदि तपाईं - प्रोग्रामर र, उद्धतता शैलीहरू दुवै कोड काम प्रयोग गर्न चाहनुहुन्छ;
• यदि तपाईं - एक बदलनेवाला र, पारंपरिक लेआउट संग रूपमा शैलीहरू काम कम ध्यान गर्न चाहनुहुन्छ;
• तपाईं minimalism चाहनुहुन्छ भने, स्टाइलस प्रयोग गर्नुहोस्।

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