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

علم `!default` في SASS

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

سوف نشرح علامة !default بالتفصيل ونوضح كيفية استخدامها من خلال أمثلة عملية۔

YouTube Video

علم !default في SASS

علم !default في SASS هو أداة هامة لتحسين مرونة وإعادة استخدام ملفات الأنماط (stylesheets)۔ من خلال استخدام هذا العلم، يمكنك تعيين قيم افتراضية للمتغيرات بينما تُعطى القيم المعرفة في أماكن أخرى الأولوية۔ هنا، سنشرح علم !default بالتفصيل ونوضح كيفية استخدامه بأمثلة عملية۔

علم !default هو ميزة خاصة بـSASS تُستخدم لتعيين القيم الافتراضية للمتغيرات۔ بإضافة هذا العلم، يتم تحقيق السلوك التالي:۔

  • تحديد القيم الافتراضية يتم تعيين القيمة فقط إذا لم يكن المتغير معرفًا في مكان آخر۔

  • التحكم في الأولوية إذا كان المتغير معرفًا بالفعل، فلن يتم استبدال قيمته۔

تكون هذه الميزة مفيدة بشكل خاص عند بناء الوحدات والمكتبات۔ يمكن للمستخدمين تعيين قيم مخصصة، ولكن إذا لم يتم تحديد أي شيء، ستُستخدم القيم الافتراضية۔

مثال أساسي

يوضح الكود التالي الاستخدام الأساسي لعلم !default۔

1// _variables.scss
2$primary-color: blue !default;
  • تحديد المتغير الافتراضي $primary-color باستخدام وسم !default۔
1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}
  • استيراد المتغيرات باستخدام @use وتجاوز $primary-color بواسطة with۔

الـ CSS الناتج 

1body {
2    background-color: red;
3}
  • في هذا المثال، بما أن $primary-color تم تعيينه إلى red في main.scss، فلن يتم استخدام اللون blue المحدد في _variables.scss۔

عندما يكون المتغير غير معرف

إذا لم يكن المتغير معرفًا في main.scss، سيتم استخدام القيمة الافتراضية۔

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}
  • بما أن المتغير تم استيراده دون تجاوز، فسيتم تطبيق القيمة الافتراضية blue لـ $primary-color والمحددة في _variables.scss۔

الـ CSS الناتج 

1body {
2    background-color: blue;
3}

الاستخدام داخل الوحدات المتداخلة

استخدام !default داخل الوحدات يمنحك تخصيصًا مرنًا۔

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;
  • تحديد $primary-color و $button-color باستخدام وسم !default۔
1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}
  • استيراد وحدة variables وتحديد لون العنصر .button باستخدام المتغير $button-color۔
1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';
  • استخدام @use مع with لتجاوز $button-color ليصبح orange، واستخدام وحدة buttons۔

الـ CSS الناتج 

1.button {
2    color: orange;
3}
  • بهذه الطريقة، توفر الوحدات القيم الافتراضية مع احترام إعدادات المستخدم المحددة۔

نقاط يجب الانتباه لها

عند استخدام علم !default، يجب مراعاة النقاط التالية:۔

  • اختيار القيم الافتراضية المناسبة يجب اختيار القيم الافتراضية لتغطية الاستخدامات العامة والشائعة۔

  • تصميم متعمد ومدروس استخدم أسماء متغيرات متسقة وتجنب التعارض مع وحدات أخرى۔

  • التحقق من الترتيب لكي يعمل علم !default كما هو مطلوب، يجب إدارة ترتيب تجاوز (override) المتغيرات بشكل صحيح۔

سيناريوهات عملية

تبديل الثيمات

على سبيل المثال، عند إنشاء مكتبة تدعم الثيمات، يمكنك استخدام !default لتوفير قيم افتراضية قابلة للتخصيص۔

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}
  • تحديد $background-color و $text-color باستخدام وسم !default للثيم وتطبيقهم على الـbody۔
1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);
  • تخصيص الثيم من خلال تجاوز $background-color باستخدام @use و with۔

الـ CSS الناتج 

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

مكونات قابلة لإعادة الاستخدام

في مكون زر قابل لإعادة الاستخدام، يمكنك تقديم أنماط افتراضية مع السماح للمستخدمين بتجاوز اللون۔

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}
  • تحديد ألوان الخلفية والنص الافتراضية للأزرار باستخدام وسم !default وتطبيق التنسيقات۔
1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);
  • تخصيص لون الزر من خلال تجاوز $button-bg باستخدام @use و with۔

الـ CSS الناتج 

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

ملخص علم !default

علم !default في SASS هو أداة قوية عند بناء الوحدات والمكتبات۔ يعزز إعادة الاستخدام مع إتاحة التخصيص المرن۔

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

YouTube Video

متغيرات SASSعلم `!global` في SASS