تقديم وحدات ساس

مرحبا يا هبر! أقدم إليكم ترجمة مقال "تقديم وحدات Sass" للمريم مريم سوزان.

في الآونة الأخيرة ، ظهرت ميزة في Sass مألوفة لك بلغات أخرى: نظام معياري . هذه خطوة كبيرة للأمام لـ @import ، واحدة من الوظائف الأكثر استخدامًا في Sass. على الرغم من أن توجيه @import الحالي يسمح لك بتوصيل حزم الجهات الخارجية وفصل الأنماط الخاصة بك إلى عناصر مدعومة ، إلا أنه لا يزال يتضمن العديد من القيود :

• @import موجود أيضًا في CSS ، وأي اختلافات في سلوكهم يمكن أن تكون مربكة.
• إذا قمت @import عدة مرات بملف واحد ، فقد يؤدي ذلك إلى إبطاء عملية الترجمة ، وتسبب في إعادة تعريف التعارضات ، وستحصل على رمز مكرر في الإخراج.
• كل شيء في النطاق العالمي ، بما في ذلك حزم الجهات الخارجية - هذه هي الطريقة التي يمكن أن تتخطى بها وظيفة color وظيفة color الحالية أو العكس.
• عندما تستخدم وظيفة مثل color ، فمن المستحيل أن تعرف بالضبط أين يتم تعريفها. التي @import توصيله؟

حاول مؤلفو حزم Sass (مثلي) التغلب على مشاكل مساحة الاسم من خلال إعداد بادئات للمتغيرات والوظائف يدويًا - لكن وحدات Sass تعد حلاً أكثر قوة. باختصار ، @import استبدال @import @forward و @forward الأكثر وضوحًا. خلال السنوات القليلة المقبلة ، سيتم إهمال @import في Sass ثم إزالته. لا يزال بإمكانك استخدام CSS Import ، ولكن لن يتم تجميعها بواسطة Sass. ولكن لا تقلق ، فهناك أداة ترحيل ستساعدك في الترقية.

استيراد الملفات باستخدام @use

 @use 'buttons'; 

@use الجديد @import ، لكن لديه بعض الاختلافات البارزة:

• يتم استيراد الملف مرة واحدة ، بغض النظر عن عدد المرات التي تستخدم فيها @use في المشروع.
• تعتبر المتغيرات والخلطات والوظائف (التي تسمى "الأعضاء" في Sass) والتي تبدأ بشرطة سفلية ( _ ) أو شرطة ( - ) خاصة ولا يتم استيرادها.
• يمكن الوصول إلى الأعضاء من الملف المتصل عبر @use (في حالتنا buttons.scss ) محليًا فقط ولا يتم نقلهم إلى عمليات الاستيراد التالية.
• وبالمثل ، فإن @extends لن تطبق إلا على المنبع ؛ أي ، ينطبق الملحق فقط على الأنماط التي يتم استيرادها ، وليس على الأنماط التي يتم استيرادها.
• جميع الأعضاء المستوردة لديهم مساحة الاسم الخاصة بهم بشكل افتراضي.

عندما نعلق الملف عبر @use ، يقوم Sass تلقائيًا بإنشاء مساحة اسم بناءً على اسم الملف.

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

الآن لدينا إمكانية الوصول إلى أعضاء كل من ملف buttons.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 * إضافة الوحدة النمطية إلى مساحة اسم الجذر ، وبالتالي فإن البادئة غير مطلوبة ، ولكن لا يزال أعضاؤها محددين محليًا بموجب المستند الحالي.

استيراد وحدات Sass المضمنة

تم نقل القدرات الداخلية في Sass أيضًا إلى نظام معياري ، لذلك لدينا سيطرة كاملة على مساحة الاسم العالمية. هناك العديد من الوحدات النمطية المضمنة - 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 ، دون تكرار هذه البادئة:

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

يمكنك العثور على قائمة كاملة بالوحدات المدمجة والوظائف وتغييرات الأسماء في مواصفات وحدة Sass .

الميزات الأساسية الجديدة والمتغيرة

وكميزة إضافية ، هذا يعني أن Sass يمكنه إضافة مزج ووظائف داخلية جديدة بأمان دون التسبب في تعارض الأسماء. المثال المذهل هو load-css sass:meta من sass:meta module. يعمل بشكل مشابه لـ @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 ، ويجب أن يفي هذا المتغير بالشروط:

• ليس متغيرًا خاصًا يبدأ بـ _ أو -
• ملحوظ مع التوجيه الافتراضي !default

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

لاحظ أن المفتاح 'base-color' يحدد 'base-color' الأساسي المتغير $base-color .

هناك عدة وظائف جديدة من الوحدة النمطية 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 module أيضًا على بعض التحفظات المثيرة للاهتمام حول حل بعض مشكلاتنا القديمة. العديد من الوظائف القديمة مثل lighten() أو color.adjust() لم تعد موصى بها للاستخدام لصالح الدوال الواضحة color.adjust() و color.scale() :

 /*  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() ، والذي يستخدم الرياضيات الخطية: إضافة 20% إلى خفة red الحالية في مثالنا أعلاه. في معظم الحالات ، نريد تغيير ( scale() ) اللون بنسبة مئوية معينة مقارنة بالقيمة الحالية:

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

بعد إهمالها وإزالتها تمامًا ، ستظهر هذه الوظائف في النهاية في sass:color مع سلوك جديد يستند إلى color.scale() بدلاً من color.adjust() . سيحدث هذا تدريجياً لتجنب مشكلات التوافق المفاجئ. في غضون ذلك ، أوصي بالتحقق يدويًا من الكود لمعرفة أين قد يكون color.scale() أكثر فائدة.

تكوين المكتبات المستوردة

غالبًا ما تأتي مكتبات الجهة الخارجية أو المكتبات التي يعاد استخدامها مع بعض المتغيرات مع بعض القيم الافتراضية التي يمكنك تجاوزها. لقد فعلنا ذلك مع المتغيرات قبل الاستيراد:

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

بما أنه عند استخدام الوحدات النمطية لم يعد الوصول إلى المتغيرات المحلية ، نحتاج إلى طريقة جديدة لتعيين القيم. يمكننا القيام بذلك عن طريق تمرير الإعدادات عبر map إلى @use :

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

يشبه هذا $with الوسيطة في load-css() ، ولكن بدلاً من استخدام أسماء المتغيرات كمفاتيح ، نستخدم المتغيرات نفسها مع رمز $ .

يعجبني مدى الوضوح الذي أصبح عليه الإعداد ، ولكن هناك قاعدة واحدة أزعجتني عدة مرات: لا يمكن تكوين وحدة إلا مرة واحدة عند الاستخدام الأول . لطالما كان أمر الاتصال مهمًا لـ Sass ، حتى مع @import ، لكن هذه المشكلات لم يتم ملاحظتها. الآن حصلنا على خطأ واضح ، وهذا أمر جيد وغير متوقع قليلاً. تأكد من توصيل المكتبات عبر @use وتكوينها في ملف الإدخال (المستند المركزي الذي يستورد جميع الملفات الأخرى) بحيث يتم تجميع هذه الإعدادات قبل اتصالات المكتبة الأخرى عبر @use .

لا يمكن (في الوقت الحالي) "ربط" التكوينات معًا ، والاحتفاظ بها قابلة للتحرير ، ولكن يمكنك لف الوحدة النمطية المكونة ونقلها كوحدة نمطية جديدة.

نقل الملفات مع @forward

لا نحتاج دائمًا إلى استخدام الملف والرجوع إلى أعضائه. في بعض الأحيان ، نريد فقط نقلها إلى الواردات اللاحقة. افترض أن لدينا العديد من الملفات المرتبطة بالنماذج ، ونريد توصيلها جميعًا معًا بمساحة اسم واحدة. يمكننا القيام بذلك مع @forward :

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

لا يتوفر أعضاء هذه الملفات المعاد توجيهها في المستند الحالي ولا يتم إنشاء مساحة اسم ، لكن هذه المتغيرات والوظائف والخلطات ستكون متاحة عندما يقوم ملف آخر @use عبر @use أو @use المجموعة بأكملها من خلال @forward . إذا كانت الملفات الفردية المقدمة تحتوي على CSS فعلي ، فسيتم إرسالها أيضًا دون إنشائها مباشرةً حتى يتم استخدام الحزمة نفسها. في هذه المرحلة ، سيتم اعتبار كل هذا كوحدة واحدة ذات مساحة اسم واحدة:

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

ملاحظة : إذا طلبت من Sass إرفاق مجلد ، فسوف يبحث عن ملف 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 'forms'; @use 'forms'; 

هذا مفيد بشكل خاص إذا كنت تريد تكوين المكتبة مسبقًا أو إضافة أدوات إضافية قبل نقلها إلى ملفات أخرى. يمكن أن يساعد هذا في تبسيط مسارات الاتصال:

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

يجب الإعلان عن كل من @use و @forward في جذر المستند (غير متداخل) وفي بداية الملف. يمكن أن تظهر فقط @charset وتعريفات المتغيرات البسيطة قبل توجيهات الاستيراد.

الانتقال إلى نظام وحدات

لاختبار بناء الجملة الجديد ، قمت بإنشاء مكتبة Sass جديدة مفتوحة المصدر ( أنظمة Cascading Color Systems ) وموقع جديد لمجموعتي - لا يزال كلاهما قيد التطوير. كنت بحاجة لفهم الوحدات من وجهة نظر مؤلف المكتبة ومن وجهة نظر مطور الموقع. لنبدأ بتجربة "المستخدم النهائي" في كتابة أنماط الموقع باستخدام بناء جملة الوحدة النمطية ...

أنماط الدعم والكتابة

استخدام الوحدات النمطية على الموقع كان ممتعًا. يدعم بناء الجملة الجديد بنية التعليمات البرمجية التي أستخدمها بالفعل. جميع عمليات الاستيراد الخاصة بي من الإعدادات والأدوات العامة موجودة في نفس الدليل (أسميها 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 يتم استبدالها في كل مكان دفعة واحدة ، فقد أعطى مطورو Sass بعض الوقت لعملية النقل. تتوفر الوحدات النمطية الآن ، لكن @import لن @import لمدة عام أو عامين آخرين - وسيتم إزالتها من اللغة بعد عام واحد فقط من ذلك. في الوقت نفسه ، سيعمل النظامان معًا بأي طريقة:

• إذا قمنا بتنفيذ @import لملف يحتوي على بناء جملة new @use/@forward ، فسيتم استيراد الأعضاء العموميين فقط دون مساحة اسم.
• إذا قمنا بتنفيذ @use أو @forward لملف يحتوي على بناء جملة @import القديم ، @forward على حق الوصول إلى جميع الواردات المتداخلة @forward اسم واحدة.

هذا يعني أنه يمكنك البدء فوراً في استخدام بناء جملة الوحدة النمطية الجديدة ، دون انتظار إصدار نسخة جديدة من مكتباتك المفضلة: ويمكنني قضاء بعض الوقت في تحديث جميع المكتبات الخاصة بي!

أداة الهجرة

لن تستغرق عملية الترقية فترة طويلة إذا استخدمنا أداة الترحيل التي أنشأتها Jennifer Thakar. يمكن تثبيته باستخدام NPM ، Chocolatey أو Homebrew:

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

هذه ليست أداة لمرة واحدة للانتقال إلى الوحدات النمطية. الآن وقد عاود Sass تطويره النشط (انظر أدناه) ، ستتلقى أداة الترحيل أيضًا تحديثات منتظمة لمساعدة منفذ كل ميزة جديدة. إنها لفكرة جيدة تثبيت هذه الأداة عالميًا وحفظها للاستخدام في المستقبل.

يمكن إطلاق أداة الترحيل من سطر الأوامر ، ونأمل أن تتم إضافتها إلى تطبيقات الطرف الثالث مثل CodeKit و Scout. قم style.scss إلى ملف Sass واحد ، على سبيل المثال style.scss الذي سيتم تطبيقه. في الوقت الحالي ، هناك ترحيل واحد فقط يسمى module :

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

بشكل افتراضي ، يقوم برنامج الترحيل بتحديث ملف واحد فقط ، لكن في معظم الحالات نريد تحديث الملف الرئيسي وكل التبعيات: أي عناصر متصلة عبر @import أو @use أو @use . يمكننا القيام بذلك عن طريق تحديد كل ملف على حدة أو ببساطة عن طريق إضافة --migrate-deps .

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

لإجراء اختبار ، يمكننا إضافة --dry-run --verbose (أو بشكل مختصر - -nv ) وإلقاء نظرة على النتائج دون تغيير الملفات المصدر. هناك عدد من الخيارات الأخرى التي يمكننا استخدامها لتهيئة الترحيل - هناك حتى خيار مصمم خصيصًا لمساعدة مؤلفي المكتبات على حذف مساحات الأسماء القديمة التي تم إنشاؤها يدويًا - لكنني لن أصفها جميعًا هنا. أداة الترحيل موثقة بالكامل على موقع Sass .

تحديث المكتبات المنشورة

واجهت العديد من المشكلات من جانب المكتبة ، على وجه الخصوص ، عندما حاولت إتاحة تكوينات المستخدم للعديد من الملفات وإيجاد حل لتكوينات "السلسلة" المفقودة. يمكن أن تكون الأخطاء المتعلقة بالترتيب صعبة للتصحيح ، لكن النتائج تستحق الجهد المبذول ، وأعتقد أننا سنرى بعض الإصلاحات الإضافية قريبًا. ما زلت بحاجة إلى تجربة أداة الترحيل على حزم معقدة ، وربما أكتب مقالة إضافية لمؤلفي المكتبة.

الشيء المهم الذي يجب معرفته الآن هو أن ساس وفر لنا الحماية أثناء الانتقال. لا يمكن أن تعمل الواردات والوحدات النمطية القديمة معًا فحسب ، بل يمكننا إنشاء ملفات " استيراد فقط " لتوفير عمل أكثر ملاءمة للمستخدمين الذين ما زالوا يربطون مكتباتنا عبر @import . في معظم الحالات ، سيكون هذا إصدارًا بديلاً من ملف الحزمة الرئيسية ، وتريد أن تكون بالقرب من: <name>.scss لمستخدمي الوحدة النمطية و <name>.import.scss للمستخدمين القدامى. في كل مرة يتصل المستخدم @import <name> ، يقوم بتحميل .import الملف:

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

هذا مفيد بشكل خاص لإضافة بادئات للمطورين الذين لا يستخدمون الوحدات النمطية:

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

ساس التحديث

قد تتذكر أن Sass جمد إضافة وظائف جديدة منذ عدة سنوات ، حتى تتمكن تطبيقاتها المختلفة (LibSass ، Node Sass ، Dart Sass) من اللحاق بالتطبيق الأصلي في Ruby ، ​​من أجل التخلي عنه تمامًا . انتهى التجميد في العام الماضي بالعديد من الميزات الجديدة والمناقشات النشطة والتطوير على جيثب - ولكن ليس بشكل رسمي. إذا فاتتك هذه الإصدارات ، فيمكنك قراءة مدونة Sass :

• واردات CSS وتوافق CSS (Dart Sass v1.11)
• معلمات توجيه المحتوى ووظائف اللون (Dart Sass v1.15)

حاليًا ، تعد Dart Sass تطبيقًا أساسيًا وعادة ما تكون أول من يقدم ميزات جديدة. أوصي بالتبديل إلى ذلك إذا كنت ترغب في الحصول على جميع أحدث. يمكنك تثبيت Dart Sass باستخدام NPM أو Chocolatey أو Homebrew. كما أنه يعمل بشكل رائع مع بلع ساس .

مثل CSS (بدءًا من CSS3) ، لم يعد هناك رقم إصدار واحد للإصدارات الجديدة. تعمل جميع تطبيقات Sass بنفس المواصفات ، لكن لكل منها جدول زمني فريد للترقيم والترقيم ، وهو ما ينعكس في معلومات الدعم في الوثائق الجديدة الجميلة التي صممتها Jina .



تتوفر وحدات Sass اعتبارًا من 1 أكتوبر 2019 في Dart Sass 1.23.0 .