משתנים לאסימוני עיצוב

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 3 מתוך 35.

עכשיו, כשאתה יודע איך ליצור משתני CSS ולהשתמש בהם, בוא נראה איך הם עוזרים לארגן את העיצוב שלך.

אסימוני עיצוב הם משתני 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);
}

השימוש באסימוני עיצוב מבטיח עקביות ברחבי האתר שלך ומקל על ביצוע עדכונים.

אתגר

קל

יש לך דף עם מאמרים על מזונות בריאים וכמה סגנונות קיימים. התפקיד שלך הוא לשפר אותו באמצעות משתני CSS.

בתוך הבורר :root, צור משתנה בשם --color-secondary והגדר את הערך שלו לכתום חמים: #f39c12.
בתוך הבורר :root, צור משתנה בשם --spacing-medium והגדר את הערך שלו ל-16px.
השתמש ב---color-secondary כדי להגדיר את צבע הטקסט של כל רכיבי <h2>.
השתמש ב---spacing-medium כדי להגדיר את ה-ריפוד של רכיב ה-<section>.

נסו בעצמכם

<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>