पेश है सास मॉड्यूल

नमस्कार, हेब्र! मैं आपको मिरियम सुज़ैन के लेख "इंट्रोड्यूसिंग सास मॉड्यूल" का अनुवाद प्रस्तुत करता हूं।

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

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

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

@use का उपयोग करके फ़ाइलें आयात करें

 @use 'buttons'; 

नया @use के समान है, लेकिन इसमें कुछ उल्लेखनीय अंतर हैं:

• फ़ाइल को एक बार आयात किया जाता है, चाहे आप कितनी बार परियोजना में @use उपयोग करें।
• एक अंडरस्कोर ( _ ) या हाइफ़न ( - ) के साथ शुरू होने वाले चर, मिश्रण और फ़ंक्शन (जिन्हें "सैस में सदस्य" कहा जाता है) निजी माना जाता है और आयात नहीं किया जाता है।
• @use (हमारे मामले में buttons.scss @use ) के माध्यम से जुड़ी फ़ाइल के सदस्य केवल स्थानीय रूप से सुलभ हैं और बाद के आयात पर स्थानांतरित नहीं होते हैं।
• इसी तरह, @extends केवल अपस्ट्रीम लागू करेंगे; यही है, एक्सटेंशन केवल उन शैलियों पर लागू होता है जो आयात की जाती हैं, और आयात करने वाली शैलियों के लिए नहीं।
• सभी आयातित सदस्यों का डिफ़ॉल्ट रूप से अपना नाम स्थान है।

जब हम फ़ाइल को @use माध्यम से @use , तो Sass स्वचालित रूप से फ़ाइल नाम के आधार पर एक नाम स्थान बनाता है।

 @use 'buttons'; /*    `buttons`*/ @use 'forms'; /*    `forms`*/ 

अब हमारे पास दोनों buttons.scss के सदस्यों की पहुंच है। फाइल और forms.scss । forms.scss फाइल, लेकिन यह पहुंच आयातों के बीच स्थानांतरित नहीं की जाती है: forms.scss अभी भी buttons.scss में परिभाषित चर तक पहुंच नहीं है। चूंकि आयातित संस्थाओं में एक नाम स्थान है, हमें उन तक पहुँचने के लिए नए डॉट-सीमांकित सिंटैक्स का उपयोग करना चाहिए:

 /* : <namespace>.$variable */ $btn-color: buttons.$color; $form-border: forms.$input-border; /* : <namespace>.function() */ $btn-background: buttons.background(); $form-border: forms.border(); /* : @include <namespace>.mixin() */ @include buttons.submit(); @include forms.input(); 

हम आयात as <name> जोड़कर डिफ़ॉल्ट नाम स्थान को बदल या निकाल सकते हैं।

 @use 'buttons' as *; /*      */ @use 'forms' as 'f'; $btn-color: $color; /* buttons.$color    */ $form-border: f.$input-border; /* forms.$input-border    */ 

के as * का उपयोग मॉड्यूल को मूल नामस्थान में जोड़ता है, इसलिए उपसर्ग की आवश्यकता नहीं है, लेकिन इसके सदस्य अभी भी स्थानीय रूप से वर्तमान दस्तावेज़ द्वारा सीमित हैं।

आयात सैस एंबेडेड मॉड्यूल

सैस में आंतरिक क्षमताओं को भी एक मॉड्यूलर प्रणाली में स्थानांतरित कर दिया गया है, इसलिए वैश्विक नाम स्थान पर हमारा पूर्ण नियंत्रण है। कई अंतर्निहित मॉड्यूल हैं - math , color , string , list , map , selector और meta - जिन्हें उपयोग से पहले स्पष्ट रूप से फ़ाइल में आयात किया जाना चाहिए।

 @use 'sass:math'; $half: math.percentage(1/2); 

एंबेडेड मॉड्यूल भी वैश्विक अंतरिक्ष में आयात किया जा सकता है:

 @use 'sass:math' as *; $half: percentage(1/2); 

अंतर्निहित फ़ंक्शंस जिनमें पहले से ही उपसर्ग नाम हैं, जैसे कि map-get str-index या str-index , इस उपसर्ग को दोहराए बिना उपयोग किया जा सकता है:

 @use 'sass:map'; @use 'sass:string'; $map-get: map.get(('key': 'value'), 'key'); $str-index: string.index('string', 'i'); 

आप Sass मॉड्यूल विनिर्देश में बिल्ट-इन मॉड्यूल, फ़ंक्शन और नाम परिवर्तन की पूरी सूची पा सकते हैं।

नई और बदली हुई कोर विशेषताएं

एक अतिरिक्त लाभ के रूप में, इसका मतलब है कि Sass सुरक्षित रूप से नए आंतरिक मिश्रण और कार्यों को जोड़ सकता है, बिना नाम संघर्ष के। सबसे आश्चर्यजनक उदाहरण sass:meta से load-css sass:meta है sass:meta मॉड्यूल। यह @use समान काम करता है, लेकिन केवल उत्पन्न CSS लौटाता है और आपके कोड में कहीं भी गतिशील रूप से काम करता है:

 @use 'sass:meta'; $theme-name: 'dark'; [data-theme='#{$theme-name}'] { @include meta.load-css($theme-name); } 

पहला तर्क मॉड्यूल URL ( @use रूप में) है, लेकिन इसे डायनामिक रूप से एक चर का उपयोग करके बदला जा सकता है, यहां तक ​​कि प्रक्षेप का उपयोग करके, उदाहरण के लिए theme-#{$name} । दूसरा (वैकल्पिक) तर्क विन्यास के साथ एक map संरचना लेता है:

 /*   $base-color  'theme/dark'   */ @include meta.load-css( 'theme/dark', $with: ('base-color': rebeccapurple) ); 

तर्क वाला $with आपको map संरचना का उपयोग करके लोड किए गए मॉड्यूल में किसी भी चर को कॉन्फ़िगर करने की अनुमति देता है, और इस चर को शर्तों को पूरा करना चाहिए:

• यह एक निजी चर नहीं है जो _ या - शुरू होता है
• डिफ़ॉल्ट निर्देश के साथ चिह्नित

 /* theme/_dark.scss */ $base-color: black !default; /*    */ $_private: true !default; /*        */ $config: false; /*    ,      !default */ 

ध्यान दें कि कुंजी 'base-color' वेरिएबल $base-color सेट करता है।

sass:meta मॉड्यूल से कुछ और नए फ़ंक्शन हैं sass:meta : module-variables() और module-functions() । उनमें से प्रत्येक पहले से ही आयातित मॉड्यूल से नामों और मूल्यों से एक map संरचना देता है। वे मॉड्यूल नेमस्पेस के लिए एक तर्क लेते हैं:

 @use 'forms'; $form-vars: module-variables('forms'); /* ( button-color: blue, input-border: thin, ) */ $form-functions: module-functions('forms'); /* ( background: get-function('background'), border: get-function('border'), ) */ 

sass:meta से कई अन्य कार्य sass:meta - global-variable-exists() , function-exists() , mixin-exists() , और get-function() - अतिरिक्त $module तर्क प्राप्त करेंगे जो हमें प्रत्येक नामस्थान को स्पष्ट रूप से जांचने की अनुमति देते हैं।

रंग समायोजित करें और स्केल करें

sass:color मॉड्यूल में हमारी कुछ पुरानी समस्याओं को हल करने के बारे में कुछ दिलचस्प आरक्षण भी हैं। कई lighten() कार्यों जैसे lighten() या adjust-hue() अब स्पष्ट फ़ंक्शंस color.adjust() और color.scale() पक्ष में उपयोग के लिए अनुशंसित नहीं adjust-hue() :

 /*  lighten(red, 20%) */ $light-red: color.adjust(red, $lightness: 20%); /*  adjust-hue(red, 180deg) */ $complement: color.adjust(red, $hue: 180deg); 

इनमें से कुछ पदावनत कार्य (जैसे adjust-hue ) निरर्थक और अनावश्यक हैं। अन्य - जैसे lighten , darken , saturate , आदि। - आंतरिक तर्क में सुधार के लिए पुन: कार्यान्वयन की आवश्यकता है। मूल कार्य adjust() पर आधारित थे, जो रैखिक गणित का उपयोग करता है: ऊपर हमारे उदाहरण में red की वर्तमान चमक में 20% जोड़ते हैं। ज्यादातर मामलों में, हम वर्तमान मूल्य के सापेक्ष एक निश्चित प्रतिशत द्वारा रंग ( scale() बदलना चाहते हैं:

 /*        20,   0.2,     */ $light-red: color.scale(red, $lightness: 20%); 

पूरी तरह से पदावनत और हटाए जाने के बाद, ये कार्य अंततः sass:color में फिर से दिखाई देंगे sass:color color.scale() आधार पर एक नए व्यवहार के साथ sass:color , न कि color.adjust() । यह अचानक पिछड़े संगतता मुद्दों से बचने के लिए धीरे-धीरे होगा। इस बीच, मैं आपको यह देखने के लिए मैन्युअल रूप से आपके कोड की जांच करने की सलाह देता हूं कि कहां color.scale() अधिक उपयोगी हो सकता है।

आयातित पुस्तकालयों को कॉन्फ़िगर करें

तृतीय-पक्ष या पुन: प्रयोज्य पुस्तकालय अक्सर कुछ डिफ़ॉल्ट मानों के साथ चर के साथ आते हैं जिन्हें आप ओवरराइड कर सकते हैं। हमने आयात से पहले चर के साथ ऐसा किया:

 /* _buttons.scss */ $color: blue !default; /* old.scss */ $color: red; @import 'buttons'; 

चूंकि मॉड्यूल का उपयोग करते समय स्थानीय चर तक पहुंच नहीं होती है, इसलिए हमें मूल्यों को निर्धारित करने के लिए एक नया तरीका चाहिए। हम map माध्यम से सेटिंग्स को पास करके ऐसा कर सकते हैं:

 @use 'buttons' with ( $color: red, $style: 'flat', ); 

यह load-css() में तर्क के $with समान है, लेकिन कुंजी के रूप में चर नामों का उपयोग करने के बजाय, हम $ प्रतीक के साथ स्वयं चर का उपयोग करते हैं।

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

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

@forward साथ फ़ाइलों को स्थानांतरित @forward

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

 /* forms/_index.scss */ @forward 'input'; @forward 'textarea'; @forward 'select'; @forward 'buttons'; 

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

 /* styles.scss */ @use 'forms'; /*        `forms` */ 

नोट : यदि आप Sass को किसी फ़ोल्डर को संलग्न करने के लिए कहते हैं, तो वह इसमें index या _index फ़ाइल को _index ।

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

 /*    `border()`   `$border-color`   `input` */ @forward 'input' show border, $border-color; /*     `buttons`    `gradient()` */ @forward 'buttons' hide gradient; 

नोट : जब फ़ंक्शंस और मिक्सिन्स का एक सामान्य नाम होता है, तो उन्हें जोड़ा जाता है और साथ में छिपाया जाता है।

स्रोतों को स्पष्ट करने के लिए या अग्रेषित मॉड्यूल के नामों के टकराव से बचने के लिए, हम निम्नलिखित फ़ाइल के सदस्यों के साथ उपसर्ग जोड़ सकते हैं:

 /* forms/_index.scss */ /* @forward "<url>" as <prefix>-*; */ /* ,      `background()` */ @forward 'input' as input-*; @forward 'buttons' as btn-*; /* style.scss */ @use 'forms'; @include forms.input-background(); @include forms.btn-background(); 

और, अगर हमें जरूरत है, हम हमेशा @use माध्यम से उपयोग कर सकते हैं और दोनों नियमों को जोड़ते @forward , @forward माध्यम से एक ही मॉड्यूल को @forward @use सकते हैं:

 @forward 'forms'; @use 'forms'; 

यह विशेष रूप से उपयोगी है यदि आप लाइब्रेरी को पूर्व-कॉन्फ़िगर करना चाहते हैं या इसे अन्य फ़ाइलों में स्थानांतरित करने से पहले अतिरिक्त उपकरण जोड़ना चाहते हैं। यह कनेक्शन पथ को आसान बनाने में मदद कर सकता है:

 /* _tools.scss */ /*        */ @use 'accoutrement/sass/tools' with ( $font-path: '../fonts/', ); /*    */ @forward 'accoutrement/sass/tools'; /* -  ... */ /* _anywhere-else.scss */ /*      */ @use 'tools'; 

@use के मूल में (nested नहीं) और फ़ाइल की शुरुआत में @use और @forward दोनों को घोषित किया जाना चाहिए। आयात निर्देशों से पहले केवल @charset और सरल चर परिभाषाएं दिखाई दे सकती हैं।

एक मॉड्यूलर प्रणाली में संक्रमण

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

समर्थन और लेखन शैली

साइट पर मॉड्यूल का उपयोग करना सुखद था। नया सिंटैक्स कोड आर्किटेक्चर का समर्थन करता है जो मैं पहले से ही उपयोग करता हूं। वैश्विक सेटिंग्स और टूल के मेरे सभी आयात एक ही निर्देशिका में हैं (मैं इसे config कहता हूं) एक इंडेक्स फाइल के साथ जो मुझे जरूरत है सब कुछ ट्रांसफर करता है:

 /* config/_index.scss */ @forward 'tools'; @forward 'fonts'; @forward 'scale'; @forward 'colors'; 

साइट के अन्य हिस्सों को विकसित करके, मैं इन उपकरणों और विन्यासों को आयात कर सकता हूँ जहाँ भी मुझे उनकी आवश्यकता है:

 /* layout/_banner.scss */ @use '../config'; .page-title { @include config.font-family('header'); } 

यह मेरे मौजूदा पुस्तकालयों जैसे कि Accoutrement और Herman के साथ भी काम करता है, जो अभी भी पुराने @import सिंटैक्स का उपयोग करते हैं। चूंकि @import नियम @import एक साथ हर जगह नहीं बदला जाएगा, इसलिए Sass डेवलपर्स ने संक्रमण के लिए कुछ समय दिया है। मॉड्यूल अब उपलब्ध हैं, लेकिन @import एक या दो साल की @import नहीं होगा - और उसके एक साल बाद ही भाषा से हटा दिया जाएगा। इसी समय, दो प्रणालियां किसी भी तरह से एक साथ काम करेंगी:

• यदि हम उस फ़ाइल के लिए @import निष्पादित करते हैं जिसमें नया @use/@forward सिंटैक्स होता है, तो केवल सार्वजनिक सदस्यों को एक नाम के बिना आयात किया जाएगा।
• यदि हम पुराने @import सिंटैक्स वाली फ़ाइल के लिए @use या @forward को निष्पादित @use , तो हम सभी नेस्टेड आयातों को एकल नामस्थान के रूप में एक्सेस करते हैं।

इसका मतलब है कि आप तुरंत अपने पसंदीदा पुस्तकालयों के एक नए संस्करण के रिलीज की प्रतीक्षा किए बिना, नए मॉड्यूल सिंटैक्स का उपयोग करना शुरू कर सकते हैं: और मैं अपने सभी पुस्तकालयों को अपडेट करने में कुछ समय बिता सकता हूं!

प्रवासन का साधन

अगर हम जेनिफर ठाकर द्वारा बनाए गए माइग्रेशन टूल का उपयोग करते हैं तो अपग्रेड को लंबा समय नहीं लगेगा। यह एनपीएम, चॉकलेटी या होमब्रे का उपयोग करके स्थापित किया जा सकता है:

 npm install -g sass-migrator choco install sass-migrator brew install sass/sass/migrator 

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

माइग्रेटर को कमांड लाइन से लॉन्च किया जा सकता है और, उम्मीद है, कोडकिट और स्काउट जैसे तीसरे पक्ष के अनुप्रयोगों में जोड़ा जाएगा। उदाहरण के लिए style.scss लिए उसे किसी एक Sass फ़ाइल पर style.scss और उसे बताएं कि कौन से माइग्रेशन को लागू करना है। फिलहाल, केवल एक माइग्रेशन है जिसे module कहा जाता module :

 # sass-migrator <migration> <entrypoint.scss...> sass-migrator module style.scss 

डिफ़ॉल्ट रूप से, माइग्रेटर केवल एक फ़ाइल को अपडेट करता है, लेकिन ज्यादातर मामलों में हम मुख्य फ़ाइल और उसकी सभी निर्भरताओं को अपडेट करना चाहते हैं: @import , @forward या @use माध्यम से जुड़े किसी भी तत्व। हम प्रत्येक फ़ाइल को व्यक्तिगत रूप से निर्दिष्ट करके या केवल --migrate-deps ध्वज जोड़कर ऐसा कर सकते हैं।

 sass-migrator --migrate-deps module style.scss 

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

प्रकाशित पुस्तकालयों को अद्यतन करना

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

अभी जानने के लिए महत्वपूर्ण बात यह है कि सास ने हमें संक्रमण के दौरान सुरक्षा प्रदान की। न केवल पुराने आयात और मॉड्यूल एक साथ काम कर सकते हैं, हम उन उपयोगकर्ताओं के लिए अधिक सुविधाजनक काम प्रदान करने के लिए " आयात-केवल " फाइलें बना सकते हैं जो अभी भी @import लाइब्रेरी के माध्यम से हमारे पुस्तकालयों को @import । ज्यादातर मामलों में, यह मुख्य पैकेज फ़ाइल का एक वैकल्पिक संस्करण होगा, और आप उन्हें पास होना चाहते हैं: <name>.scss for मॉड्यूल उपयोगकर्ता और <name>.import.scss पुराने उपयोगकर्ताओं के लिए। जब भी उपयोगकर्ता @import <name> कॉल करता है, वह फ़ाइल .import लोड करता है:

 /*  `_forms.scss` */ @use 'forms'; /*  `_forms.import.scss` */ @import 'forms'; 

यह उन डेवलपर्स के लिए उपसर्ग जोड़ने के लिए विशेष रूप से उपयोगी है जो मॉड्यूल का उपयोग नहीं करते हैं:

 /* _forms.import.scss */ /*       */ @forward 'forms' as forms-*; 

सैस अपडेट

आपको याद होगा कि सैस ने कई साल पहले नए कार्यों को जोड़ा था, ताकि इसके विभिन्न कार्यान्वयन (लिबास, नोड सास, डार्ट सैस) मूल रूबी कार्यान्वयन को पकड़ लें, ताकि अंत में इसे पूरी तरह से छोड़ दिया जाए । फ्रीज़ पिछले साल कई नई सुविधाओं और सक्रिय चर्चा और GitHub पर विकास के साथ समाप्त हो गया - लेकिन इतनी गंभीरता से नहीं। यदि आप इन रिलीज से चूक गए हैं, तो आप सास ब्लॉग पढ़ सकते हैं:

• सीएसएस आयात और सीएसएस संगतता (डार्ट सैस v1.11)
• सामग्री निर्देश पैरामीटर और रंग फ़ंक्शन (डार्ट सैस v1.15)

वर्तमान में, डार्ट सैस एक विहित कार्यान्वयन है और आम तौर पर नई सुविधाओं को पेश करने वाला पहला है। यदि आप सभी नवीनतम प्राप्त करना चाहते हैं तो मैं इसे बदलने की सलाह देता हूं। आप एनपीएम, चॉकलेट या होमब्रे का उपयोग करके डार्ट सैस स्थापित कर सकते हैं। यह गुल-सस के साथ भी बढ़िया काम करता है।

CSS (CSS3 के साथ शुरू) की तरह, नई रिलीज़ के लिए अब एक भी संस्करण संख्या नहीं है। सभी Sass कार्यान्वयन समान विनिर्देशन के साथ काम करते हैं, लेकिन उनमें से प्रत्येक में एक अद्वितीय रिलीज़ शेड्यूल और नंबरिंग है, जो कि Jina द्वारा डिज़ाइन किए गए एक सुंदर नए दस्तावेज़ में समर्थन जानकारी में परिलक्षित होता है।



Dass Sass 1.23.0 में Sass मॉड्यूल 1 अक्टूबर, 2019 से उपलब्ध हैं।