👌🏿 👩‍🔬 🚨 TeaCSS - शैलियों के निर्माण के लिए स्पष्ट दृष्टिकोण 🧓🏽 👩🏼‍🔧 😲

परिचय

हालाँकि कई सीएसएस जैसी भाषाएं नहीं हैं - अब सास और लेस सभी कान और आवाज़ से हैं, मैं इस सवाल के जवाब के साथ शुरू करूँगा कि "मुझे एक और क्यों चाहिए?"

संक्षेप में, चायसीएसएस नई संस्थाओं का उत्पादन नहीं करता है, क्योंकि यह वही सीएसएस है जिसमें जावास्क्रिप्ट को भाषा के रूप में जोड़ा गया था।

इस दृष्टिकोण के अपने पेशेवरों और विपक्ष हैं।

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

विपक्ष - आप अभी भी CSS डोमेन की कुछ इकाइयाँ खो देते हैं, जैसे "पिक्सेल", "प्रतिशत", आदि। आप सीएसएस के साथ पाठ की तरह काम करते हैं। आपको चौड़ाई लिखनी है : @ {100 + 200} px , चौड़ाई नहीं : 100px + 200px ।

TeaCSS सिर्फ CSS टेम्पलेट इंजन या प्रीप्रोसेसर है, न कि नई भाषा सीखने के लिए। यही उसकी ताकत और कमजोरी है।

मैंने कई लेख लिखने की योजना बनाई है जिसमें बढ़ती जटिलता के साथ हम भाषा और उन कार्यों के बारे में बात करेंगे जिनके लिए इसे विकसित किया गया था।

इस (पहले) लेख में, मैं आपके विकास चक्र में TeaCSS को शामिल करने के तरीके के बारे में बात करूंगा और उदाहरणों के साथ दिखाऊंगा कि सास और लेस को कैसे पता नहीं है, लेकिन आज के लेख का नायक करता है।

लघु ट्यूटोरियल

उन लोगों के लिए जो Sass और Less का उपयोग करते हैं, आप तिरछे पढ़ सकते हैं।

टी सीएसएस का वर्णन करने वाली 3 सरल चीजें हैं। यह है:

एंबेडेड जावास्क्रिप्ट
निहित नियम
मिश्रण (वैकल्पिक और आइटम 1 द्वारा प्रतिस्थापित किया जा सकता है)

एंबेडेड जावास्क्रिप्ट

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

कोड निष्पादन सरल है:

/*   */ @ var baseColor = 'red';

या तो:

 /*   */ @{ var baseColor = 'red'; var borderColor = darken('red',20); }

फिर किसी भी CSS नियम के अंदर आप JS के भावों का उपयोग कर सकते हैं।

उदाहरण के लिए:

 body { color: @baseColor; } //   ,  /*   @{}      */ body { color: @{lighten(baseColor,Math.sin(3.14)); }

निहित नियम

आपको सीढ़ी के साथ मिश्रित चयनकर्ताओं को लिखने की अनुमति देता है।

 /* TeaCSS */ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }

hagfish

सिंथेटिक चीनी, लेस के समान। आपको मापदंडों के साथ एक अलग संदर्भ में उपयोग के लिए नियमों का एक सेट सहेजने की अनुमति देता है।

 .my_mixin(color) { // -     my_mixin = function (color) { color: @color; } body { .my_mixin('red'); }

अधिक विस्तृत स्पष्टीकरण के लिए, वेबसाइट - teacss.org पर जाएं

अपने प्रोजेक्ट से कैसे जुड़े

यह समझना बहुत महत्वपूर्ण है कि Teacs उत्पादन में CSS प्रतिस्थापन का दिखावा नहीं करता है, यह एक विकास समाधान है, इसलिए TeaCSS को नियमित CSS में बदलने का एक तरीका होना चाहिए, और यह देखने का एक तरीका है कि ब्राउज़र में सीधे क्या होता है।

सब कुछ देखने के लिए सरल है।

 <link tea="style.tea"> <script src="teacss.js"></script>

और वोइला, आपको वर्तमान पृष्ठ पर अपनी शैली का पूर्वावलोकन दिखाई देगा। अपनी परियोजनाओं में मैं कुछ का उपयोग करता हूं।

 <? if $applicationMode=='development' ?> <link tea="style.tea"> <script src="teacss.js"></script> <? else ?> <link type="text/css" rel="stylesheet" href="style.css"> <? endif ?>

सवाल यह है कि, * .tea को * .css में कैसे बदलें

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

 <script> teacss.buildCallback(function(files){ $.post(location.href,{css:files['default.css']}); }); <? if (isset($_POST['css']) file_put_contents('your/location/style.css', $_POST['css']) ?> </script>

इसी तरह, अन्य सर्वर भाषाओं में (वैसे, पुल अनुरोधों का स्वागत है)।

मक्खी पर चित्र बनाएँ

इस लेख में पहला और एकमात्र ध्यान।

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

* .Tea से * .css में अनुवाद करते समय, आप जनरेट की गई इमेज को फाइल में सेव कर सकते हैं। इसकी आवश्यकता क्यों है?

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

टेस्टिकल्स से आप ग्राफिक्स को पैरामीट्रिक भी बना सकते हैं (उदाहरण प्रलेखन से):

 @ color1 = 'red'; @ color2 = 'blue'; body { @{ // pretty clear here, huh? var canvas = new Canvas("background.png"); canvas.replaceColors( { '#ffae00':color1, '#f7e7ba':lighten(color1,30), '#705551':color2 }); // display canvas.background('bg.png'); } }

सिद्धांत की अधिक संपूर्ण समझ के लिए, मैं एक पृष्ठभूमि की पीढ़ी को 0. के साथ दिखाऊंगा। उदाहरण के लिए, एक धारीदार पृष्ठभूमि। वैसे, आप इसे एक मिश्रक के रूप में व्यवस्थित कर सकते हैं और फिर बाद की परियोजनाओं में इसका उपयोग कर सकते हैं।

 .background_striped(size,width,color) { @{ (new Canvas(size,size)) .draw2D(function(ctx){ ctx.beginPath(); ctx.lineWidth = width; ctx.strokeStyle = color.toString(); ctx.moveTo(-size,-size); ctx.lineTo(size*2,size*2); ctx.moveTo(-size-size,-size); ctx.lineTo(size,size*2); ctx.moveTo(-size+size,-size); ctx.lineTo(size*3,size*2); ctx.stroke(); }) .background(); } }

और यहाँ एक उपयोग उदाहरण है:
teacss.org/stripes.htm

निष्कर्ष

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

बस इस बारे में और परियोजना की वास्तुकला के बारे में, मैं अगले लेख में बताऊंगा।

पुनश्च

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

TeaCSS - शैलियों के निर्माण के लिए स्पष्ट दृष्टिकोण