الملفات الجزئية و @import

الملفات الجزئية و @import في SASS

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

ما هي الملفات الجزئية؟

الملف الجزئي هو ملف SASS يحتوي على مقتطفات من كود CSS تريد تضمينها في ملفات SASS أخرى. تُسمى الملفات الجزئية بشرطة سفلية بادئة (_)، والتي تخبر SASS بعدم ترجمتها إلى ملفات CSS مستقلة. بدلاً من ذلك، يُقصد بها أن تُستورد في ملفات SASS أخرى.

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-family: "Helvetica Neue", Arial, sans-serif;
$base-font-size: 16px;
$line-height: 1.6;

// التباعد
$spacing-unit: 8px;
$spacing-small: $spacing-unit;
$spacing-medium: $spacing-unit * 2;
$spacing-large: $spacing-unit * 3;

// نقاط التوقف
$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;

توجيه @import

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

// main.scss
@import "variables";
@import "mixins";
@import "base";
@import "layout";
@import "components/buttons";
@import "components/cards";

body {
  font-family: $font-family;
  color: $text-color;
}

كيف يعمل @import

عندما يواجه SASS توجيه @import، يبحث عن الملف في نفس الدليل (أو المسار المحدد)، ويقرأ محتوياته، ويتضمنها في ذلك الموقع بالضبط في عملية الترجمة. يحدث هذا قبل إنشاء أي CSS.

// _colors.scss
$primary: blue;
$secondary: green;

// _typography.scss
$font-main: Arial, sans-serif;
$font-size: 16px;

// main.scss
@import "colors";
@import "typography";

body {
  font-family: $font-main;
  font-size: $font-size;
  color: $primary;
}

// يُترجم إلى:
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: blue;
}

ترتيب الاستيراد مهم

الترتيب الذي تستورد به الملفات أمر بالغ الأهمية لأن CSS يتبع مبدأ التسلسل الهرمي. تتجاوز القواعد اللاحقة القواعد السابقة إذا كان لها نفس الخصوصية. بالإضافة إلى ذلك، يجب عليك استيراد المتغيرات قبل استخدامها.

// main.scss

// 1. التكوين (المتغيرات، الدوال)
@import "config/variables";
@import "config/functions";

// 2. الأدوات (mixins، placeholders)
@import "tools/mixins";
@import "tools/placeholders";

// 3. الأنماط الأساسية (إعادة التعيين، الطباعة)
@import "base/reset";
@import "base/typography";

// 4. التخطيط
@import "layout/grid";
@import "layout/header";
@import "layout/footer";

// 5. المكونات
@import "components/buttons";
@import "components/forms";
@import "components/cards";

// 6. الصفحات
@import "pages/home";
@import "pages/about";

// 7. السمات
@import "themes/dark";

// 8. الأدوات المساعدة (يجب أن تكون أخيراً للتجاوز)
@import "utilities/helpers";
@import "utilities/spacing";

استراتيجيات تنظيم الملفات

يستخدم مشروع SASS المنظم جيداً عادةً نظام مجلدات منظم مع ملفات جزئية متعددة. إليك نمط معماري شائع يسمى نمط 7-1 (7 مجلدات، ملف رئيسي واحد).

sass/
│
├── abstracts/
│   ├── _variables.scss    // المتغيرات
│   ├── _functions.scss    // دوال SASS
│   ├── _mixins.scss       // خلطات SASS
│   └── _placeholders.scss // عناصر نائبة SASS
│
├── base/
│   ├── _reset.scss        // إعادة التعيين/التطبيع
│   ├── _typography.scss   // قواعد الطباعة
│   └── _base.scss         // أنماط العناصر الأساسية
│
├── components/
│   ├── _buttons.scss      // أنماط الأزرار
│   ├── _cards.scss        // مكون البطاقة
│   ├── _forms.scss        // أنماط النماذج
│   └── _navbar.scss       // شريط التنقل
│
├── layout/
│   ├── _header.scss       // أنماط الرأس
│   ├── _footer.scss       // أنماط التذييل
│   ├── _sidebar.scss      // أنماط الشريط الجانبي
│   └── _grid.scss         // نظام الشبكة
│
├── pages/
│   ├── _home.scss         // أنماط خاصة بالصفحة الرئيسية
│   ├── _about.scss        // أنماط صفحة من نحن
│   └── _contact.scss      // أنماط صفحة الاتصال
│
├── themes/
│   ├── _dark.scss         // السمة الداكنة
│   └── _light.scss        // السمة الفاتحة
│
├── vendors/
│   ├── _bootstrap.scss    // تجاوزات Bootstrap
│   └── _jquery-ui.scss    // تخصيص jQuery UI
│
└── main.scss              // الملف الرئيسي الذي يستورد كل شيء

// main.scss
// هذا هو الملف الرئيسي الذي يستورد جميع الملفات الجزئية

@charset "UTF-8";

// 1. التكوين والمساعدون
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";

// 2. المكتبات الخارجية
@import "vendors/bootstrap";
@import "vendors/jquery-ui";

// 3. الأشياء الأساسية
@import "base/reset";
@import "base/typography";
@import "base/base";

// 4. أقسام متعلقة بالتخطيط
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/grid";

// 5. المكونات
@import "components/buttons";
@import "components/cards";
@import "components/forms";
@import "components/navbar";

// 6. أنماط خاصة بالصفحات
@import "pages/home";
@import "pages/about";
@import "pages/contact";

// 7. السمات
@import "themes/dark";
@import "themes/light";

أمثلة على الملفات الجزئية الشائعة

// _mixins.scss

// توسيط Flexbox
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// خلطة استعلام الوسائط
@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 480px) { @content; }
  }
  @else if $breakpoint == tablet {
    @media (max-width: 768px) { @content; }
  }
  @else if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

// خلطة الانتقال
@mixin transition($properties...) {
  transition: $properties;
  -webkit-transition: $properties;
  -moz-transition: $properties;
}

// _base.scss
// يجب استيراده بعد _variables.scss

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: $font-family;
  font-size: $base-font-size;
  line-height: $line-height;
  color: $text-color;
  background-color: $bg-color;
  margin: 0;
  padding: 0;
}

a {
  color: $link-color;
  text-decoration: none;
  transition: color 0.3s ease;

  &:hover {
    color: $link-hover-color;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

// _buttons.scss
// ملف جزئي للمكون لأنماط الأزرار

.btn {
  display: inline-block;
  padding: $spacing-medium $spacing-large;
  border: none;
  border-radius: 4px;
  font-size: $base-font-size;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }

  &--primary {
    background: $primary-color;
    color: white;

    &:hover {
      background: darken($primary-color, 10%);
    }
  }

  &--secondary {
    background: $secondary-color;
    color: white;

    &:hover {
      background: darken($secondary-color, 10%);
    }
  }

  &--large {
    padding: $spacing-large ($spacing-large * 1.5);
    font-size: $base-font-size * 1.2;
  }

  &--small {
    padding: $spacing-small $spacing-medium;
    font-size: $base-font-size * 0.875;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

مشاكل @import

بينما كان @import الطريقة القياسية لتضمين ملفات SASS لسنوات، فإنه يحتوي على العديد من المشاكل الكبيرة التي أدت إلى تطوير نظام وحدات جديد.

// _config-a.scss
$color: blue;

// _config-b.scss
$color: red;  // هذا يستبدل $color السابق!

// main.scss
@import "config-a";
@import "config-b";

.element {
  color: $color;  // سيكون أحمر، وليس أزرق!
}

// _variables.scss
$primary: blue;

// _buttons.scss
@import "variables";
.btn { color: $primary; }

// _forms.scss
@import "variables";
.input { border-color: $primary; }

// main.scss
@import "buttons";  // يستورد المتغيرات
@import "forms";    // يستورد المتغيرات مرة أخرى!

// النتيجة: تتم معالجة _variables.scss مرتين،
// مما قد يسبب مشاكل وترجمة أبطأ

لماذا يتم إهمال @import

بسبب هذه المشاكل، قدم فريق SASS نظام وحدات جديد مع توجيهات @use و @forward. أصبح توجيه @import الآن مهملاً وسيتم إزالته في النهاية من SASS. يجب على مشاريع SASS الحديثة استخدام @use بدلاً من ذلك.

متى تستخدم @import (الكود القديم)

بينما @import مهمل، قد تواجهه في:

• قواعد الكود القديمة التي لم تُهاجر بعد
• مكتبات الطرف الثالث القديمة التي لا تزال تستخدم @import
• عندما تحتاج إلى الحفاظ على التوافق مع الإصدارات السابقة

للمشاريع الجديدة، فضل دائماً @use على @import. سنغطي نظام الوحدات الحديث مع @use و @forward في الدرس التالي.

أفضل الممارسات لتنظيم الملفات الجزئية

// _cards.scss
// أنماط مكون البطاقة
//
// التبعيات:
//   - abstracts/variables (الألوان، التباعد)
//   - abstracts/mixins (خلطة responsive)
//
// الاستخدام:
//   <div class="card">
//     <div class="card__header">...</div>
//     <div class="card__body">...</div>
//   </div>

.card {
  background: $card-bg;
  border-radius: $border-radius;
  box-shadow: $shadow-light;
  overflow: hidden;

  &__header {
    padding: $spacing-medium;
    border-bottom: 1px solid $border-color;
  }

  &__body {
    padding: $spacing-medium;
  }

  @include responsive(mobile) {
    margin: $spacing-small;
  }
}

بنية مشروع من العالم الحقيقي

// بنية مشروع لموقع مدونة

blog-project/
├── sass/
│   ├── abstracts/
│   │   ├── _variables.scss
│   │   ├── _mixins.scss
│   │   └── _functions.scss
│   │
│   ├── base/
│   │   ├── _reset.scss
│   │   ├── _typography.scss
│   │   └── _utilities.scss
│   │
│   ├── layout/
│   │   ├── _header.scss
│   │   ├── _nav.scss
│   │   ├── _sidebar.scss
│   │   ├── _footer.scss
│   │   └── _grid.scss
│   │
│   ├── components/
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   ├── _forms.scss
│   │   ├── _post.scss
│   │   ├── _comment.scss
│   │   └── _pagination.scss
│   │
│   ├── pages/
│   │   ├── _home.scss
│   │   ├── _blog-list.scss
│   │   ├── _blog-post.scss
│   │   └── _contact.scss
│   │
│   └── main.scss
│
└── css/
    └── main.css (الناتج المترجم)

// محتوى main.scss:
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";

@import "base/reset";
@import "base/typography";
@import "base/utilities";

@import "layout/header";
@import "layout/nav";
@import "layout/sidebar";
@import "layout/footer";
@import "layout/grid";

@import "components/buttons";
@import "components/cards";
@import "components/forms";
@import "components/post";
@import "components/comment";
@import "components/pagination";

@import "pages/home";
@import "pages/blog-list";
@import "pages/blog-post";
@import "pages/contact";

// main.scss (معطوب)
@import "components/buttons";
@import "base/typography";
@import "abstracts/variables";
@import "layout/header";
@import "abstracts/mixins";

// قم بإصلاح الترتيب بحيث:
// 1. تكون المتغيرات والخلطات متاحة لجميع الملفات الأخرى
// 2. تأتي الأنماط الأساسية قبل المكونات
// 3. يأتي التخطيط بعد الأساسي ولكن قبل الأنماط الخاصة بالصفحة