Articles
مقدمة إلى SASS/SCSS
علم `!global` في SASS

علم `!global` في SASS

تشرح هذه المقالة الراية !global في SASS۔

سنشرح الآلية التفصيلية، وأمثلة الاستخدام، والاحتياطات المتعلقة بالراية !global۔

YouTube Video

علم !global في SASS

في SASS، يُستخدم علم !global للتحكم في نطاق المتغيرات۔ من خلال فهم هذا العلم واستخدامه بشكل مناسب، يمكنك منع السلوك غير المتوقع في الكود وتحسين قابلية الصيانة۔

ما هو علم !global؟

عادةً، لمتغيرات SASS نطاق معيّن۔ افتراضيًا، تكون المتغيرات صالحة فقط ضمن النطاق الذي تم تعريفها فيه۔ بمعنى آخر، إذا تم تعريف متغير داخل دالة أو mixin، فلا يمكن الوصول إليه خارج ذلك النطاق۔

ومع ذلك، باستخدام علم !global، يمكنك تعيين المتغير مباشرة للنطاق العام۔ وهذا يسمح بمشاركة المتغيرات عبر النطاقات المختلفة۔

بدون علم !global 

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}
  • في هذا الكود، تم تعريف $color في النطاق العام، لذا خاصية color في .change تبقى red۔

الـ CSS الناتج 

1.change {
2    color: red;
3}

مع علم !global

لنُضف علم !global إلى نفس المثال۔

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}
  • في هذه الحالة، لأن علم !global تم تحديده، يتم تحديث قيمة $color في النطاق العام۔ وبالتالي، تصبح خاصية color في .change هي blue۔

الـ CSS الناتج 

1.change {
2    color: blue;
3}

الاحتياطات عند الاستخدام

  • تلوث النطاق العام الاستخدام المفرط لعلم !global قد يؤدي إلى تعارضات غير متوقعة وتلوث في النطاق العام۔ هذا أمر مهم بشكل خاص في المشاريع الكبيرة، حيث يجب تجنب الإفراط في استخدام هذه العلامة۔

  • الكتابة فوق القيم بشكل غير مقصود عند استخدام علامة !global، قد يتم الكتابة فوق المتغيرات التي تحمل نفس الاسم في أماكن أخرى بدون قصد۔ لذلك، من الضروري تسمية المتغيرات بشكل واضح وموحّد۔

مثال عملي

فيما يلي مثال على الاستخدام الصحيح لعلامة !global۔

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}
  • في هذا الكود، يمكن استخدام خلط set-theme للتبديل الديناميكي بين الثيمات۔ نظرًا لتحديث المتغيرات العامة لكل ثيم، يمكن إدارة عدة ثيمات بشكل مرن۔

الـ CSS الناتج 

1body {
2    background-color: #333333;
3    color: #666666;
4}

الأخطاء الشائعة والتدابير التصحيحية

نسيان العلامة

إذا نسيت إضافة !global، قد لا يتم تحديث المتغيرات في النطاق المطلوب۔ تأكد من إضافة العلامة بشكل صريح عند الحاجة۔

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

الاعتماد المفرط على النطاق العام

الاعتماد بشكل مفرط على علامة !global قد يجعل تصحيح وصيانة الكود أمرًا صعبًا۔ يجب تقليل استخدامها إلى الحد الأدنى۔

الملخص

علامة !global في SASS مفيدة جدًا في حالات معينة، لكن يجب استخدامها بحذر۔ من خلال فهم نطاق المتغيرات وإدارة النطاق العام بشكل صحيح، يمكنك كتابة كود SASS سهل الصيانة بشكل كبير۔

النقاط التالية يجب أن تؤخذ بعين الاعتبار:۔

  1. المتغيرات تعتمد على نطاقها بشكل افتراضي۔

  2. تسمح لك علامة !global بتحديث المتغيرات في النطاق العام۔

  3. قلّل من استخدام العلامات إلى الحد الأدنى وتجنب الكتابة فوق القيم بدون قصد كلما أمكن ذلك۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

علم `!default` في SASS