المتغيرات: التعريف والاستخدام

المتغيرات: التعريف والاستخدام

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

صيغة $ للمتغيرات

في SASS، تبدأ جميع المتغيرات بعلامة الدولار ($). هذا يجعلها قابلة للتعرف على الفور ويمنع تعارضات الأسماء مع خصائص CSS.

// تصريح المتغير
$variable-name: value;

// استخدام المتغير
selector {
  property: $variable-name;
}

إليك مثال بسيط:

$primary-color: #3498db;

.button {
  background-color: $primary-color;
}

.link {
  color: $primary-color;
}

.button {
  background-color: #3498db;
}

.link {
  color: #3498db;
}

أنواع بيانات المتغيرات

يمكن لمتغيرات SASS تخزين أنواع مختلفة من البيانات. فهم هذه الأنواع يساعدك على استخدام المتغيرات بفعالية.

1. الأرقام

يمكن أن تكون الأرقام أعداداً صحيحة أو عشرية، بوحدات أو بدونها:

$font-size: 16px;          // رقم بوحدة
$line-height: 1.6;         // رقم بدون وحدة
$width: 100%;              // نسبة مئوية
$padding: 2rem;            // وحدة rem
$opacity: 0.8;             // عشري
$z-index: 100;             // عدد صحيح

.element {
  font-size: $font-size;
  line-height: $line-height;
  width: $width;
  padding: $padding;
  opacity: $opacity;
  z-index: $z-index;
}

2. السلاسل النصية

يمكن أن تكون السلاسل النصية بعلامات اقتباس أو بدونها:

$font-family: 'Helvetica Neue', Arial, sans-serif;  // بعلامات اقتباس
$direction: left;                                     // بدون علامات اقتباس
$content: "مرحباً بالعالم";                          // علامات اقتباس مزدوجة

.element {
  font-family: $font-family;
  text-align: $direction;
  content: $content;
}

3. الألوان

يمكن أن تكون الألوان بأي تنسيق لون CSS:

$color-hex: #3498db;                    // Hex
$color-rgb: rgb(52, 152, 219);          // RGB
$color-rgba: rgba(52, 152, 219, 0.8);   // RGBA
$color-hsl: hsl(204, 70%, 53%);         // HSL
$color-named: red;                      // لون مسمى

.element {
  background: $color-hex;
  border-color: $color-rgb;
  color: $color-rgba;
  box-shadow: 0 0 10px $color-hsl;
  outline-color: $color-named;
}

4. القيم المنطقية

القيم المنطقية هي true أو false، تُستخدم غالباً مع توجيهات التحكم (@if):

$enable-shadows: true;
$enable-rounded: false;

.card {
  @if $enable-shadows {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  @if $enable-rounded {
    border-radius: 8px;
  }
}

5. Null

قيمة null تمثل عدم وجود قيمة. الخصائص بقيم null يتم حذفها من ناتج CSS:

$border-width: null;

.element {
  border-width: $border-width;  // هذا السطر لن يظهر في CSS
  border-style: solid;           // سيظهر هذا
}

.element {
  border-style: solid;
}

6. القوائم

القوائم هي تسلسلات من القيم مفصولة بمسافات أو فواصل:

// قائمة مفصولة بمسافات
$padding-values: 10px 20px 15px 20px;

// قائمة مفصولة بفواصل
$font-stack: 'Helvetica Neue', Arial, sans-serif;

// قائمة مختلطة
$box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);

.element {
  padding: $padding-values;
  font-family: $font-stack;
  box-shadow: $box-shadow;
}

7. الخرائط

الخرائط هي أزواج مفتاح-قيمة (مثل الكائنات في JavaScript):

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c,
  warning: #f39c12
);

// الوصول إلى قيم الخريطة باستخدام map-get()
.button-primary {
  background: map-get($colors, primary);
}

.button-danger {
  background: map-get($colors, danger);
}

نطاق المتغير: عام مقابل محلي

فهم نطاق المتغير أمر بالغ الأهمية لكتابة كود SASS قابل للصيانة. لدى SASS نوعان من النطاق:

النطاق العام

المتغيرات المُعلنة خارج أي محدد أو كتلة هي عامة ويمكن الوصول إليها في أي مكان:

// متغير عام
$primary-color: #3498db;

.header {
  background: $primary-color;  // يعمل!
}

.button {
  background: $primary-color;  // يعمل!
}

.footer {
  background: $primary-color;  // يعمل!
}

النطاق المحلي

المتغيرات المُعلنة داخل محدد محلية لذلك المحدد ولا يمكن الوصول إليها خارجه:

.header {
  $header-height: 80px;        // متغير محلي
  height: $header-height;      // يعمل!
}

.main {
  margin-top: $header-height;  // خطأ! متغير غير محدد
}

إخفاء المتغيرات العامة

يمكنك إنشاء متغير محلي بنفس اسم متغير عام. يخفي المتغير المحلي العام ضمن نطاقه:

$color: blue;        // عام

.header {
  $color: red;       // محلي (يخفي العام)
  background: $color;  // يستخدم أحمر (محلي)
}

.footer {
  background: $color;  // يستخدم أزرق (عام)
}

.header {
  background: red;
}

.footer {
  background: blue;
}

علامة !default: تجاوزات اختيارية

علامة !default تعيّن قيمة لمتغير فقط إذا لم يكن ذلك المتغير محدداً بالفعل. هذا مفيد بشكل لا يصدق لإنشاء قيم افتراضية للمكتبة يمكن للمستخدمين تجاوزها:

// المستخدم يحدد تفضيله
$primary-color: #e74c3c;

// المكتبة تحدد الافتراضي (سيتم تجاهله لأن المتغير محدد بالفعل)
$primary-color: #3498db !default;

.button {
  background: $primary-color;  // يستخدم #e74c3c (قيمة المستخدم)
}

إذا لم يحدد المستخدم المتغير، يتم استخدام الافتراضي:

// المستخدم لا يحدد أي شيء

// المكتبة تحدد الافتراضي (سيتم استخدامه)
$primary-color: #3498db !default;

.button {
  background: $primary-color;  // يستخدم #3498db (افتراضي)
}

علامة !global: إنشاء عامة من النطاق المحلي

علامة !global تسمح لك بإنشاء أو تعديل متغير عام من داخل نطاق محلي:

.header {
  $header-height: 80px !global;  // ينشئ متغير عام
  height: $header-height;
}

.main {
  margin-top: $header-height;  // يعمل! المتغير عام الآن
}

اصطلاحات تسمية المتغيرات

أسماء المتغيرات الجيدة تجعل كودك موثقاً ذاتياً وقابلاً للصيانة. اتبع هذه الاصطلاحات:

استخدم Kebab-Case

$primary-color: #3498db;
$font-size-base: 16px;
$border-radius-small: 4px;
$box-shadow-large: 0 10px 20px rgba(0, 0, 0, 0.2);

$primaryColor: #3498db;      // camelCase (ليس قياسياً في CSS)
$primary_color: #3498db;     // snake_case (ليس قياسياً في CSS)
$pc: #3498db;                // قصير جداً/غير واضح
$blue: #3498db;              // عام جداً

كن وصفياً

يجب أن تصف أسماء المتغيرات غرضها أو استخدامها، وليس فقط قيمتها:

$color-primary: #3498db;
$color-success: #2ecc71;
$color-danger: #e74c3c;
$font-family-heading: 'Georgia', serif;
$spacing-unit: 8px;

$blue: #3498db;              // ماذا لو تغير لون العلامة التجارية إلى أخضر؟
$green: #2ecc71;
$red: #e74c3c;
$georgia: 'Georgia', serif;
$eight: 8px;

حالات الاستخدام الشائعة للمتغيرات

دعنا نستكشف حالات الاستخدام العملية والواقعية لمتغيرات SASS:

1. لوحات الألوان

// ألوان العلامة التجارية
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-accent: #f39c12;

// ألوان دلالية
$color-success: #2ecc71;
$color-warning: #f39c12;
$color-danger: #e74c3c;
$color-info: #3498db;

// ألوان محايدة
$color-white: #ffffff;
$color-gray-100: #f8f9fa;
$color-gray-200: #e9ecef;
$color-gray-300: #dee2e6;
$color-gray-900: #212529;
$color-black: #000000;

// ألوان النص
$color-text-primary: $color-gray-900;
$color-text-secondary: $color-gray-300;
$color-text-muted: $color-gray-200;

2. نظام الطباعة

// عائلات الخطوط
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-family-heading: 'Georgia', 'Times New Roman', serif;
$font-family-code: 'Monaco', 'Courier New', monospace;

// أحجام الخطوط
$font-size-base: 16px;
$font-size-small: 14px;
$font-size-large: 18px;
$font-size-h1: 32px;
$font-size-h2: 28px;
$font-size-h3: 24px;

// أوزان الخطوط
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// ارتفاعات الأسطر
$line-height-tight: 1.2;
$line-height-base: 1.6;
$line-height-loose: 1.8;

3. مقياس المسافات

$spacing-unit: 8px;

$spacing-xs: $spacing-unit * 0.5;     // 4px
$spacing-sm: $spacing-unit;            // 8px
$spacing-md: $spacing-unit * 2;        // 16px
$spacing-lg: $spacing-unit * 3;        // 24px
$spacing-xl: $spacing-unit * 4;        // 32px
$spacing-2xl: $spacing-unit * 6;       // 48px
$spacing-3xl: $spacing-unit * 8;       // 64px

.card {
  padding: $spacing-md;
  margin-bottom: $spacing-lg;
}

.section {
  padding-top: $spacing-2xl;
  padding-bottom: $spacing-2xl;
}

4. نقاط الفصل للتصميم المستجيب

$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;
$breakpoint-wide: 1280px;

.container {
  width: 100%;

  @media (min-width: $breakpoint-tablet) {
    max-width: 720px;
  }

  @media (min-width: $breakpoint-desktop) {
    max-width: 960px;
  }

  @media (min-width: $breakpoint-wide) {
    max-width: 1200px;
  }
}

5. مقياس Z-Index

$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

.modal {
  z-index: $z-index-modal;
}

.tooltip {
  z-index: $z-index-tooltip;
}

المتغيرات مقابل CSS Custom Properties

CSS الآن لديها متغيرات أصلية تسمى Custom Properties. كيف تقارن بمتغيرات SASS؟

متغيرات SASS

• مترجمة في وقت البناء
• ثابتة - لا يمكن تغييرها في وقت التشغيل
• تدعم جميع ميزات SASS (الدوال والعمليات وما إلى ذلك)
• تعمل في جميع المتصفحات (مترجمة إلى CSS عادي)
• المزيد من الميزات: أنواع البيانات والخرائط والدوال

CSS Custom Properties

• يتم تقييمها في وقت التشغيل في المتصفح
• ديناميكية - يمكن تغييرها باستخدام JavaScript
• تتسلسل وترث مثل CSS العادية
• يمكن تحديد نطاقها لعناصر محددة
• محدودة بالمتصفحات الحديثة (لكنها مدعومة على نطاق واسع الآن)

// متغير SASS
$primary: #3498db;

// CSS Custom Property
:root {
  --primary: #3498db;
}

.element {
  // استخدام متغير SASS
  background: $primary;

  // استخدام CSS Custom Property
  color: var(--primary);
}

مثال عملي: نظام متغيرات كامل

دعنا نجمع كل شيء معاً بمثال من العالم الحقيقي:

// ===========================================
// نظام الألوان
// ===========================================

$color-primary: #3498db !default;
$color-secondary: #2ecc71 !default;
$color-danger: #e74c3c !default;

// ===========================================
// الطباعة
// ===========================================

$font-family-base: -apple-system, BlinkMacSystemFont, sans-serif !default;
$font-size-base: 16px !default;
$line-height-base: 1.6 !default;

// ===========================================
// المسافات
// ===========================================

$spacing-unit: 8px !default;
$spacing-small: $spacing-unit !default;
$spacing-medium: $spacing-unit * 2 !default;
$spacing-large: $spacing-unit * 3 !default;

// ===========================================
// المكونات
// ===========================================

$border-radius: 4px !default;
$box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
$transition-speed: 0.3s !default;

// ===========================================
// نقاط الفصل
// ===========================================

$breakpoint-tablet: 768px !default;
$breakpoint-desktop: 1024px !default;

الخلاصة

المتغيرات هي أساس كود SASS القابل للصيانة. لقد تعلمت عن أنواع البيانات والنطاق وعلامات !default و !global واصطلاحات التسمية وحالات الاستخدام العملية. مع هذه المعرفة، يمكنك إنشاء أنظمة تصميم متسقة وقابلة للتوسع!

في الدرس التالي، سنستكشف التداخل بالتفصيل - كل من تداخل المحددات وتداخل الخصائص - ونتعلم أفضل الممارسات لتجنب الأخطاء الشائعة.