التداخل: المحددات والخصائص

التداخل: المحددات والخصائص

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

لماذا التداخل مهم

في CSS العادية، يجب عليك تكرار المحددات الأصلية مراراً وتكراراً:

.navigation {
  background: #333;
  padding: 20px;
}

.navigation ul {
  list-style: none;
  margin: 0;
}

.navigation ul li {
  display: inline-block;
  margin-right: 10px;
}

.navigation ul li a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
}

.navigation ul li a:hover {
  background: #555;
}

.navigation ul li a:active {
  background: #777;
}

هذا مطول وعرضة للأخطاء وصعب الصيانة. مع تداخل SASS، يمكنك كتابة نفس الأنماط في بنية تعكس HTML الخاص بك:

.navigation {
  background: #333;
  padding: 20px;

  ul {
    list-style: none;
    margin: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        color: white;
        text-decoration: none;
        padding: 5px 10px;

        &:hover {
          background: #555;
        }

        &:active {
          background: #777;
        }
      }
    }
  }
}

أنظف بكثير! البنية تمثل بصرياً التسلسل الهرمي لـ HTML، مما يجعلها أسهل في الفهم والتعديل.

كيف تُترجم التداخل إلى CSS

فهم كيفية ترجمة التداخل يساعدك على التنبؤ بالناتج وتجنب الأخطاء. تقوم SASS بتحويل المحددات المتداخلة إلى محددات تابعة في CSS:

.card {
  padding: 20px;

  .card-header {
    font-size: 24px;
  }
}

.card {
  padding: 20px;
}

.card .card-header {
  font-size: 24px;
}

يصبح .card-header المتداخل .card .card-header (محدد تابع).

مستويات متعددة من التداخل

.article {
  .article-header {
    .article-title {
      font-size: 32px;
    }
  }
}

.article .article-header .article-title {
  font-size: 32px;
}

كل مستوى من التداخل يضيف محدداً آخر إلى السلسلة.

محدد الأصل (&): أفضل صديق لك

الأمبرساند (&) هو حرف خاص يشير إلى المحدد الأصل. إنه ضروري للفئات الزائفة والعناصر الزائفة وفئات المعدل.

الفئات الزائفة مع &

.button {
  background: #3498db;
  color: white;
  padding: 10px 20px;

  &:hover {
    background: #2980b9;
  }

  &:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
  }

  &:active {
    transform: scale(0.98);
  }

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

.button {
  background: #3498db;
  color: white;
  padding: 10px 20px;
}
.button:hover {
  background: #2980b9;
}
.button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}
.button:active {
  transform: scale(0.98);
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

العناصر الزائفة مع &

.button {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover::before {
    opacity: 1;
  }

  &::after {
    content: "→";
    margin-left: 5px;
  }
}

فئات المعدل مع &

& مثالي لإنشاء فئات المعدل (مثل منهجية BEM):

.button {
  padding: 10px 20px;
  background: #3498db;
  color: white;

  // معدل الفئة: .button.primary
  &.primary {
    background: #3498db;
  }

  // معدل الفئة: .button.secondary
  &.secondary {
    background: #95a5a6;
  }

  // معدل الفئة: .button.danger
  &.danger {
    background: #e74c3c;
  }

  // معدل نمط BEM: .button--large
  &--large {
    padding: 15px 30px;
    font-size: 18px;
  }

  // معدل نمط BEM: .button--small
  &--small {
    padding: 5px 10px;
    font-size: 12px;
  }
}

.button {
  padding: 10px 20px;
  background: #3498db;
  color: white;
}
.button.primary {
  background: #3498db;
}
.button.secondary {
  background: #95a5a6;
}
.button.danger {
  background: #e74c3c;
}
.button--large {
  padding: 15px 30px;
  font-size: 18px;
}
.button--small {
  padding: 5px 10px;
  font-size: 12px;
}

تنسيق قائم على السياق مع &

يمكنك وضع & في أي مكان في المحدد، حتى بعد محدد آخر:

.button {
  background: blue;
  color: white;

  // عندما يكون الزر داخل .dark-theme
  .dark-theme & {
    background: black;
    border: 1px solid white;
  }

  // عندما يكون الزر داخل nav
  nav & {
    margin-right: 10px;
  }

  // عندما يكون الزر طفلاً مباشراً لـ .toolbar
  .toolbar > & {
    margin: 5px;
  }
}

.button {
  background: blue;
  color: white;
}
.dark-theme .button {
  background: black;
  border: 1px solid white;
}
nav .button {
  margin-right: 10px;
}
.toolbar > .button {
  margin: 5px;
}

تداخل الخصائص

تسمح SASS أيضاً بتداخل الخصائص التي تشترك في نفس البادئة (مثل font- و border- و background-). هذا أقل استخداماً ولكن يمكن أن يقلل من التكرار:

.text {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
    style: italic;
  }

  border: {
    width: 1px;
    style: solid;
    color: #ccc;
    radius: 4px;
  }

  background: {
    color: white;
    image: url('pattern.png');
    repeat: no-repeat;
    position: center;
  }
}

.text {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  border-radius: 4px;
  background-color: white;
  background-image: url("pattern.png");
  background-repeat: no-repeat;
  background-position: center;
}

تداخل الخصائص مع الاختصارات

يمكنك الجمع بين تداخل الخصائص وقيم الاختصار:

.element {
  border: 1px solid #ccc {
    radius: 4px;
    top-color: blue;
  }

  margin: 0 auto {
    top: 20px;
    bottom: 20px;
  }
}

.element {
  border: 1px solid #ccc;
  border-radius: 4px;
  border-top-color: blue;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

أفضل ممارسة: قيّد عمق التداخل (أقصى 3-4 مستويات)

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

// لا تفعل هذا
.page {
  .container {
    .sidebar {
      .widget {
        .widget-header {
          .widget-title {
            color: blue;  // كابوس الخصوصية!
          }
        }
      }
    }
  }
}

/* هذا المحدد محدد جداً! */
.page .container .sidebar .widget .widget-header .widget-title {
  color: blue;
}

نهج أفضل (جيد)

// أفضل بكثير!
.widget {
  background: white;
  padding: 20px;

  &__header {
    margin-bottom: 15px;
  }

  &__title {
    color: blue;
    font-size: 18px;
  }

  &__content {
    line-height: 1.6;
  }

  &--featured {
    border: 2px solid gold;
  }
}

.widget {
  background: white;
  padding: 20px;
}
.widget__header {
  margin-bottom: 15px;
}
.widget__title {
  color: blue;
  font-size: 18px;
}
.widget__content {
  line-height: 1.6;
}
.widget--featured {
  border: 2px solid gold;
}

خطر التداخل المفرط: انتفاخ الخصوصية

دعنا نرى مثالاً ملموساً على سبب كون التداخل المفرط مشكلة:

.header {
  .navigation {
    ul {
      li {
        a {
          color: blue;

          &:hover {
            color: darkblue;
          }
        }
      }
    }
  }
}

/* الخصوصية: (0, 0, 5, 0) - عالية جداً! */
.header .navigation ul li a {
  color: blue;
}

/* الخصوصية: (0, 1, 5, 0) - أعلى! */
.header .navigation ul li a:hover {
  color: darkblue;
}

الآن تخيل أنك تريد تنسيق روابط التنقل بشكل مختلف على صفحة معينة:

/* هذا لن يعمل - ليس محدداً بما فيه الكفاية! */
.special-page .navigation a {
  color: red;
}

ستحتاج إلى محدد أكثر تحديداً لتجاوزه، مما يؤدي إلى حرب خصوصية لا نهاية لها.

الحل: تداخل ضحل

.navigation {
  ul {
    list-style: none;
  }

  &__item {
    display: inline-block;
  }

  &__link {
    color: blue;

    &:hover {
      color: darkblue;
    }
  }
}

// الآن سهل التجاوز عند الحاجة
.special-page .navigation__link {
  color: red;
}

مثال من العالم الحقيقي: مكون بطاقة منسق

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

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;

  // حالة التمرير للبطاقة بأكملها
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  // صورة البطاقة
  &__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  // غلاف محتوى البطاقة
  &__content {
    padding: 20px;
  }

  // عنوان البطاقة
  &__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;

    // رابط متداخل داخل العنوان
    a {
      color: inherit;
      text-decoration: none;

      &:hover {
        color: #3498db;
      }
    }
  }

  // وصف البطاقة
  &__description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
  }

  // تذييل البطاقة
  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
  }

  // زر البطاقة
  &__button {
    padding: 8px 16px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: #2980b9;
    }
  }

  // معدل: بطاقة مميزة
  &--featured {
    border: 2px solid gold;

    .card__title {
      color: #f39c12;
    }
  }

  // معدل: بطاقة مدمجة
  &--compact {
    .card__image {
      height: 120px;
    }

    .card__content {
      padding: 15px;
    }

    .card__title {
      font-size: 18px;
    }
  }

  // السياق: البطاقة داخل شبكة
  .grid & {
    margin-bottom: 20px;
  }
}

التداخل مقابل المحددات المسطحة: متى تستخدم كل منها

استخدم التداخل عندما:

• الأنماط مرتبطة بشكل وثيق بمكون أصل
• تحتاج إلى فئات أو عناصر زائفة (&:hover)
• إنشاء فئات معدل (&--large)
• تنسيق قائم على السياق (.dark-theme &)
• العناصر ذات الصلة تشترك في مساحة اسم (.card__title)

استخدم المحددات المسطحة عندما:

• يمكن استخدام العناصر بشكل مستقل
• التداخل سيتجاوز 3 مستويات
• تحتاج إلى خصوصية منخفضة لسهولة التجاوز
• إنشاء فئات الأدوات المساعدة (.text-center)

اعتبارات الأداء

بينما التداخل لا يؤثر بشكل مباشر على حجم ملف CSS (يترجم إلى نفس الناتج)، يمكن للمحددات المحددة بشكل مفرط أن تبطئ عرض المتصفح قليلاً. المتصفحات الحديثة سريعة، لكن المحددات المتداخلة بعمق مثل .a .b .c .d .e .f تستغرق وقتاً أطول للمطابقة من .f.

الخلاصة

التداخل هو ميزة SASS قوية تجعل ملفات الأنماط أكثر قابلية للقراءة والصيانة. لقد تعلمت كيفية تداخل المحددات، واستخدام محدد الأصل (&)، وتداخل الخصائص، والأهم من ذلك، كيفية تجنب الأخطاء الشائعة للتداخل المفرط. حافظ على التداخل ضحلاً (3-4 مستويات كحد أقصى)، تبنَّ منهجية BEM، وستكون SASS الخاصة بك نظيفة وفعالة وقابلة للصيانة!

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

.product { padding: 20px; }
.product .product-image { width: 100%; }
.product .product-title { font-size: 24px; }
.product .product-title a { color: blue; }
.product .product-title a:hover { color: darkblue; }
.product .product-price { font-weight: bold; color: green; }
.product .product-button { padding: 10px; background: blue; }
.product .product-button:hover { background: darkblue; }
.product.featured { border: 2px solid gold; }

.page {
  .container {
    .content {
      .article {
        .article-header {
          .article-title {
            h1 {
              color: blue;
            }
          }
        }
      }
    }
  }
}