MODX के लिए सैस प्लगइन

शुरुआती: एक आसान लेआउट उपकरण, जो मॉडेक्स में प्लग-इन के संचालन को बनाता और समझता है।

सैस - सही सीएसएस

कैस्केडिंग स्टाइल शीट - सास लिखने के लिए विस्तारित प्रारूप में अच्छे पुराने CSS की कमी (CSS3 के लिए सही) के बहुत से (यदि सभी नहीं) है। कुछ भी नहीं के लिए है कि रूबी के रेल पर पालन (जहां से सास की जड़ें आती हैं) को प्यार से "सिंटैक्टिक शुगर" कहते हैं।

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

हमारे समय के रुझानों के साथ रहो

सीएमएस MODx की शर्तों के तहत PHP में प्रोग्राम करने वालों के लिए, एक प्लगइन बनाने का प्रस्ताव है जो कि sass फ़ाइलों में उपस्थिति और परिवर्तनों की निगरानी करेगा और स्वचालित रूप से (re) टेम्पलेट में जुड़ी हुई सीएसएस फ़ाइलों को उत्पन्न करता है।

हम खोज का उपयोग करते हैं: "php sass parser"

हमें जिस कार्यक्षमता की आवश्यकता है, उसके कार्यान्वयन में से एक phamlp लाइब्रेरी के आंत्र में है। फामल्प में एक और "रूबी मिठास" भी है - एचएमएल (HTML के लिए एक अद्भुत प्रतिस्थापन), लेकिन यह एक दीर्घकालिक कहानी है।

MODx के लिए प्लगइन

कुछ सरल कदम:
1. phamlp लाइब्रेरी के साथ संग्रह डाउनलोड करें
2. "संपत्ति / प्लगइन्स / phamlp" में संग्रह को अनपैक करें (यह haml फ़ोल्डर के बिना संभव है)
3. "एलिमेंट्स" में एक नया प्लगइन "SASS" बनाएं
4. प्लगइन कोड को कॉपी और पेस्ट करें:

//    (   ) $style_dir = MODX_BASE_PATH.'assets/css/'; //   $files = scandir(rtrim($style_dir,'/')); //     sass foreach ($files as $sass_file) if (is_file($style_dir.$sass_file) && (strtolower(pathinfo($style_dir.$sass_file,PATHINFO_EXTENSION))=='sass')) { //   md5   .sass  $sass_hash = hash('md5',file_get_contents($style_dir.$sass_file)); //    ( .sasshash )       -  css if (!file_exists($style_dir.$sass_file.'hash')||($sass_hash!=file_get_contents($style_dir.$sass_file.'hash'))) { //   phamlp include_once(MODX_BASE_PATH.'assets/plugins/phamlp/sass/SassParser.php'); //       sass  $sass = new SassParser(array( 'cache'=>false, 'style'=>'expanded', 'vendor_properties'=>array( 'border-radius' => array( '-moz-border-radius', '-webkit-border-radius', '-khtml-border-radius' ), 'border-top-right-radius' => array( '-moz-border-radius-topright', '-webkit-border-top-right-radius', '-khtml-border-top-right-radius' ), 'border-bottom-right-radius' => array( '-moz-border-radius-bottomright', '-webkit-border-bottom-right-radius', '-khtml-border-bottom-right-radius' ), 'border-bottom-left-radius' => array( '-moz-border-radius-bottomleft', '-webkit-border-bottom-left-radius', '-khtml-border-bottom-left-radius' ), 'border-top-left-radius' => array( '-moz-border-radius-topleft', '-webkit-border-top-left-radius', '-khtml-border-top-left-radius' ), 'box-shadow' => array('-moz-box-shadow', '-webkit-box-shadow'), 'box-sizing' => array('-moz-box-sizing', '-webkit-box-sizing'), 'opacity' => array('-moz-opacity', '-webkit-opacity', '-khtml-opacity'), ) )); //  css  file_put_contents( $style_dir.substr($sass_file,0,-4).'css', $sass->toCss($style_dir.$sass_file) ); //   file_put_contents( $style_dir.$sass_file.'hash', $sass_hash ); } } 

5. "सिस्टम ईवेंट" टैब पर, OnWebPageInit के बगल में स्थित बॉक्स को चेक करें। इसका मतलब है वेब पेज के इनिशियलाइज़ेशन के दौरान प्लगइन कोड चलाना (दूसरे शब्दों में, हर बार जब कोई साइट पर किसी पेज को लोड करता है)। इस समय होने वाली अन्य MODx घटनाओं (OnWebPagePrerender, OnParseDocument) का उपयोग उसी सफलता के साथ किया जा सकता है।
6. प्लगइन सहेजें

सास प्रारूप में शैलियों के साथ काम करना

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

"संपत्ति / सीएसएस" निर्देशिका में (जैसा कि $ style_dir चर में संकेत दिया गया है), एक्सटेंशन .sass के साथ एक फ़ाइल बनाएं। आरंभ करने के लिए, इस फ़ाइल में आप विकिपीडिया से उदाहरण सहेज सकते हैं ।

हम साइट को एक ब्राउज़र में खोलते हैं या खुले पेज को अपडेट करते हैं। जिस समय OnWebPageInit ईवेंट होता है, उस समय SASS प्लगिन लॉन्च किया जाएगा, जो एक ताज़ा sass फ़ाइल के लिए स्कैन करेगा और इसका css वर्जन जेनरेट करेगा, जो तब से दुनिया भर के उपयोगकर्ताओं के डाउनलोड के लिए उपलब्ध है।

साइट की स्टाइलिंग पर काम खत्म करने के बाद, प्लगइन को निष्क्रिय किया जा सकता है ताकि यह निष्क्रिय स्कैन न करे।

UPD: MODx Evo और MODx Revo में प्लग-इन और निर्दिष्ट सिस्टम ईवेंट के नाम बनाने के लिए समान सिद्धांत हैं।