المتغيرات لرموز التصميم

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

الآن بعد أن عرفت كيفية إنشاء واستخدام متغيرات CSS، دعنا نرى كيف تساعد في تنظيم تصميمك.

رموز التصميم (Design tokens) هي متغيرات CSS خاصة تخزن الألوان الرئيسية لموقعك، والخطوط، والتباعد، وقيم الأنماط الأخرى.

باستخدام رموز التصميم، يمكنك الحفاظ على اتساق أنماطك وسهولة تحديثها — ما عليك سوى تغيير الرمز مرة واحدة، وسيعكس الموقع بالكامل هذا التغيير!

إليك كيفية إنشاء متغيرات CSS لرموز التصميم الخاصة بك:

:root {
  /* الألوان */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* التباعد */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* الخطوط */
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

هنا نقوم بتطبيق رموز التصميم هذه على عناصرك:

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: var(--font-size-medium);
}

.card {
  border: 1px solid var(--secondary-color);
  margin: var(--spacing-medium);
  padding: var(--spacing-large);
}

يضمن استخدام رموز التصميم (design tokens) الاتساق عبر موقعك الإلكتروني ويجعل التحديثات أسهل.

التحدي

سهل

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

داخل محدد :root، قم بإنشاء متغير باسم --color-secondary واضبط قيمته على اللون البرتقالي الدافئ: #f39c12.
داخل محدد :root، قم بإنشاء متغير باسم --spacing-medium واضبط قيمته على 16px.
استخدم --secondary-color لضبط لون النص لجميع عناصر <h2>.
استخدم --spacing-medium لضبط البطانة (padding) لعنصر <section>.

ورقة مرجعية

رموز التصميم (Design tokens) هي متغيرات CSS التي تخزن الألوان الرئيسية لموقعك، والخطوط، والتباعد، وقيم الأنماط الأخرى لضمان الاتساق وسهولة التحديثات.

قم بإنشاء رموز التصميم في محدد :root:

:root {
  /* الألوان */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* التباعد */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* الخطوط */
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

قم بتطبيق رموز التصميم باستخدام var():

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: var(--font-size-medium);
}

.card {
  border: 1px solid var(--secondary-color);
  margin: var(--spacing-medium);
  padding: var(--spacing-large);
}

جرّب بنفسك

<html>
<head>
    <title>Design Tokens</title>
    <style>
      /* Design tokens: colors, fonts, spacing */
      :root {
        --color-primary: #27ae60;  
        --color-text: #2c3e50;      
        --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --spacing-small: 8px;
        --spacing-large: 24px;
        --border-radius: 8px;
        --bg-light: #e8f5e9;          
      }
    
      body {
        font-family: var(--font-base);
        color: var(--color-text);
        background: var(--bg-light);
        margin: 0;
        padding: var(--spacing-large);
        line-height: 1.5;
      }
    
      header {
        text-align: center;
        margin-bottom: var(--spacing-large);
      }
    
      header h1 {
        color: var(--color-primary);
        margin-bottom: 0.2em;
      }
    
      header p {
        font-size: 1.1rem;
        color: #4a6a4a;
      }
    
      section {
        max-width: 700px;
        margin: 0 auto;
        background: white;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      }
    
      h2 {
        margin-top: 0;
      }
    
      article {
        margin-bottom: var(--spacing-large);
      }
    
      article:last-child {
        margin-bottom: 0;
      }
    
      .btn {
        display: inline-block;
        background-color: var(--color-primary);
        color: white;
        border: none;
        padding: var(--spacing-small) var(--spacing-small);
        border-radius: var(--border-radius);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-decoration: none;
      }
    
      .btn:hover {
        background-color: #1e8449;
      }
    </style>
    </head>
    <body>
    
    <header>
      <h1>Eat Healthy, Feel Great!</h1>
      <p>Your guide to nutritious and delicious foods.</p>
    </header>
    
    <section>
      <article>
        <h2>Avocados</h2>
        <p>Rich in healthy fats and fiber, avocados support heart health and keep you full longer.</p>
        <button class="btn">Learn More</button>
      </article>

      <article>
        <h2>Quinoa</h2>
        <p>A complete protein source, quinoa is great for vegetarians and provides essential amino acids.</p>
        <button class="btn">Learn More</button>
      </article>

      <article>
        <h2>Blueberries</h2>
        <p>Packed with antioxidants and vitamins, blueberries promote brain health and fight inflammation.</p>
        <button class="btn">Learn More</button>
      </article>
    </section>
</body>
</html>