المتغيرات المحلية

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 4 من 35.

قد تكون لاحظت أننا غالباً ما نستخدم :root للتصريح عن المتغيرات. هذا لأن :root هو عام (global) — المتغيرات المعرفة هنا تنطبق على صفحة HTML بالكامل (كما ذكرنا سابقاً).

لكن في بعض الأحيان، قد ترغب في استخدام متغيرات تؤثر فقط على أجزاء معينة من الصفحة. على سبيل المثال، تخيل أنك تقوم ببناء متجر إلكتروني يحتوي على العديد من بطاقات المنتجات. يمكنك إنشاء متغيرات داخل فئة .card لتنسيق تلك البطاقات فقط دون التأثير على العناصر الأخرى.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

بهذه الطريقة، يعمل المتغير فقط داخل عناصر .card، مما يمنحك تحكماً أكبر في مناطق محددة.

التحدي

سهل

لقد تم تزويدك بصفحة متجر إلكتروني تحتوي على عدة بطاقات للمنتجات. مهمتك هي:

داخل فئة .card، قم بإنشاء متغير CSS محلي باسم --card-accent وقم بتعيين قيمته إلى coral.
استخدم هذا المتغير لتعيين لون النص لعنوان <h3> الموجود داخل البطاقة.
استخدم نفس المتغير كـ لون خلفية لزر <button> الخاص بالبطاقة.

ورقة مرجعية

يمكن تعريف متغيرات CSS محلياً داخل محددات معينة، وليس فقط بشكل عام في :root. تنطبق المتغيرات المحلية فقط على العناصر الموجودة ضمن نطاق ذلك المحدد.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

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

جرّب بنفسك

<html>
<head>
    <title>Local Variables</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">    <style>
      /* Global variable for body background */
      :root {
        --body-bg: #000f26;
        --font-family: "Playfair Display", serif;
      }
    
      body {
        background-color: var(--body-bg);
        font-family: var(--font-family);
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
      }
    
      /* Card styles */
      .card {
        --card-bg: white;
        background-color: var(--card-bg);
        border-radius: 10px;
        padding: 15px;
        width: 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
    
      .card h3 {
        margin-top: 0;
      }
    
      .card p {
        font-size: 0.9rem;
        color: #333;
      }
    
      .card button {
        border: none;
        color: #000f26;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
      }
    
    </style>
    </head>
    <body>
    
    <div class="card">
      <h3>Classic Sneakers</h3>
      <p>Comfortable and stylish sneakers for everyday wear.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card special">
      <h3>Luxury Watch</h3>
      <p>Elegant watch with a unique design for special occasions.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card">
      <h3>Leather Backpack</h3>
      <p>Durable, spacious backpack made from premium leather.</p>
      <button>Buy Now</button>
    </div>
    
    </body>
</html>