استخدام متغيرات CSS

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

متغيرات CSS، وتسمى أيضاً الخصائص المخصصة (custom properties)، تتيح لك حفظ القيم تحت اسم معين وإعادة استخدامها في جميع أنحاء ملف CSS الخاص بك.
يتم التصريح عن المتغيرات داخل محدد (selector) (عادةً ما يكون :root لكي يعمل المتغير في كل مكان في الصفحة، ويسمى عاماً) باستخدام الصيغة التالية:

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

لاستخدام القيمة المخزنة في متغير، استخدم الدالة var():

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

التحدي

سهل

لديك صفحة ويب تعرض بعض الأفلام التي تُعرض في السينما. كل فيلم يحتوي على زر Buy Ticket.

مهمتك:

قم بإنشاء متغير CSS يسمى --main-color داخل محدد :root وقم بتعيين قيمته إلى seagreen.
استخدم هذا المتغير لتعيين لون الخلفية لجميع عناصر <button> في الصفحة.

ورقة مرجعية

تتيح لك متغيرات CSS (الخصائص المخصصة) حفظ القيم تحت اسم معين وإعادة استخدامها في كامل ملف CSS الخاص بك.

يتم التصريح عن المتغيرات داخل محدد (selector) باستخدام صيغة --variable-name. استخدم :root لجعل المتغيرات عامة (global):

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

لاستخدام متغير، استخدم دالة var():

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

جرّب بنفسك

<html>
<head>
    <title>How to declare a variable</title>
    <style>
        :root {
            --bg-color: #4c87f5;
             /* Write CSS rules here */
             
          }
        body {
            font-family: Arial, sans-serif;
            background: var(--bg-color);
            padding: 20px;
          }
        .movie {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
          }
        .movie h2 {
            margin: 0 0 10px;
          }
        .movie p {
            margin: 0 0 10px;
          }
        button {
            color: black;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
             /* Write CSS rules here */
            
          }
    </style>
</head>
<body>
    <h1>Today's Movies</h1>
    <div class="movie">
      <h2>Ocean Whispers</h2>
      <p>A sailor discovers a hidden island and the secrets of the sea.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Midnight Chase</h2>
      <p>A detective races against the clock to stop a mysterious heist.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Starlight Bakery</h2>
      <p>A warm comedy about friendship and following your dreams.</p>
      <button>Buy Ticket</button>
</div>
</body>
</html>