Sass Variables 💎

Store colors, sizes, and other values for consistent, maintainable styling across your projects.

What are Sass Variables?

Sass variables allow you to store values that you want to reuse throughout your stylesheet. They make your code more maintainable by letting you update values in one place instead of searching and replacing throughout your entire stylesheet.

🎨 Consistency

Maintain consistent colors, spacing, and typography

⚡ Efficiency

Change values in one place, update everywhere

🏗️ Scalability

Essential for large projects and design systems

Basic Sass Variables

Variable Types:

  • Colors: Hex, RGB, HSL values
  • Typography: Font families, sizes, weights
  • Spacing: Margins, paddings, gaps
  • Numbers: Sizes, ratios, multipliers
  • Strings: Font names, content values
  • Booleans: True/false for feature flags

Basic Variables Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Variables - Basic Usage</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: white;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .code-panel {
      background: white;
      border-radius: 10px;
      padding: 1.5rem;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .code-panel h3 {
      color: #2c3e50;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid #3498db;
    }
    
    .sass-code, .css-code {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1rem;
      border-radius: 5px;
      font-family: 'Fira Code', monospace;
      font-size: 0.9rem;
      line-height: 1.4;
      overflow-x: auto;
    }
    
    .comment { color: #7f8c8d; }
    .variable { color: #e74c3c; }
    .property { color: #3498db; }
    .value { color: #2ecc71; }
    .selector { color: #9b59b6; }
    
    .demo-area {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      margin: 2rem 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .color-swatch {
      display: flex;
      gap: 1rem;
      margin: 1rem 0;
      flex-wrap: wrap;
    }
    
    .swatch {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    .primary { background: #3498db; }
    .secondary { background: #2ecc71; }
    .accent { background: #e74c3c; }
    .dark { background: #2c3e50; }
    .light { background: #ecf0f1; color: #2c3e50; }
    
    .button {
      display: inline-block;
      padding: 1rem 2rem;
      margin: 0.5rem;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .btn-primary { background: #3498db; color: white; }
    .btn-secondary { background: #2ecc71; color: white; }
    .btn-accent { background: #e74c3c; color: white; }
    
    .typography-demo {
      margin: 2rem 0;
    }
    
    .text-large { font-size: 2rem; font-weight: bold; color: #2c3e50; }
    .text-medium { font-size: 1.5rem; color: #34495e; }
    .text-small { font-size: 1rem; color: #7f8c8d; }
    
    .spacing-demo {
      display: flex;
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .spacing-box {
      padding: 1rem;
      background: #3498db;
      color: white;
      border-radius: 5px;
    }
    
    .box-small { padding: 0.5rem; }
    .box-medium { padding: 1rem; }
    .box-large { padding: 2rem; }
    
    @media (max-width: 768px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
      
      .spacing-demo {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>💎 Sass Variables</h1>
      <p>Store and reuse values throughout your stylesheets</p>
    </div>
    
    <div class="comparison-grid">
      <div class="code-panel">
        <h3>🎨 Color Variables</h3>
        <div class="sass-code">
          <span class="comment">// Define color variables</span><br>
          <span class="variable">$primary-color</span>: <span class="value">#3498db</span>;<br>
          <span class="variable">$secondary-color</span>: <span class="value">#2ecc71</span>;<br>
          <span class="variable">$accent-color</span>: <span class="value">#e74c3c</span>;<br>
          <span class="variable">$text-dark</span>: <span class="value">#2c3e50</span>;<br>
          <span class="variable">$text-light</span>: <span class="value">#ecf0f1</span>;<br><br>
          
          <span class="comment">// Use variables</span><br>
          <span class="selector">.header</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="variable">$primary-color</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="variable">$text-light</span>;<br>
          }<br><br>
          
          <span class="selector">.button</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="variable">$secondary-color</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
          }
        </div>
      </div>
      
      <div class="code-panel">
        <h3>📄 Compiled CSS</h3>
        <div class="css-code">
          <span class="selector">.header</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#3498db</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="value">#ecf0f1</span>;<br>
          }<br><br>
          
          <span class="selector">.button</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#2ecc71</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
          }
        </div>
      </div>
    </div>
    
    <div class="comparison-grid">
      <div class="code-panel">
        <h3>📏 Typography & Spacing Variables</h3>
        <div class="sass-code">
          <span class="comment">// Typography variables</span><br>
          <span class="variable">$font-primary</span>: <span class="value">'Inter', sans-serif</span>;<br>
          <span class="variable">$font-size-base</span>: <span class="value">16px</span>;<br>
          <span class="variable">$font-size-large</span>: <span class="variable">$font-size-base</span> <span class="value">* 1.5</span>;<br>
          <span class="variable">$font-size-small</span>: <span class="variable">$font-size-base</span> <span class="value">* 0.875</span>;<br><br>
          
          <span class="comment">// Spacing variables</span><br>
          <span class="variable">$spacing-unit</span>: <span class="value">1rem</span>;<br>
          <span class="variable">$spacing-small</span>: <span class="variable">$spacing-unit</span> <span class="value">* 0.5</span>;<br>
          <span class="variable">$spacing-large</span>: <span class="variable">$spacing-unit</span> <span class="value">* 2</span>;<br><br>
          
          <span class="selector">.container</span> {<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="variable">$spacing-large</span>;<br>
          &nbsp;&nbsp;<span class="property">font-family</span>: <span class="variable">$font-primary</span>;<br>
          }
        </div>
      </div>
      
      <div class="code-panel">
        <h3>📄 Compiled CSS</h3>
        <div class="css-code">
          <span class="selector">.container</span> {<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">2rem</span>;<br>
          &nbsp;&nbsp;<span class="property">font-family</span>: <span class="value">'Inter', sans-serif</span>;<br>
          }
        </div>
      </div>
    </div>
    
    <div class="demo-area">
      <h3>🎯 Live Demo - Color Variables</h3>
      <div class="color-swatch">
        <div class="swatch primary">
          <span>Primary</span>
          <small>#3498db</small>
        </div>
        <div class="swatch secondary">
          <span>Secondary</span>
          <small>#2ecc71</small>
        </div>
        <div class="swatch accent">
          <span>Accent</span>
          <small>#e74c3c</small>
        </div>
        <div class="swatch dark">
          <span>Dark</span>
          <small>#2c3e50</small>
        </div>
        <div class="swatch light">
          <span>Light</span>
          <small>#ecf0f1</small>
        </div>
      </div>
      
      <button class="button btn-primary">Primary Button</button>
      <button class="button btn-secondary">Secondary Button</button>
      <button class="button btn-accent">Accent Button</button>
    </div>
    
    <div class="demo-area">
      <h3>🔤 Typography Demo</h3>
      <div class="typography-demo">
        <div class="text-large">Large Text (2rem)</div>
        <div class="text-medium">Medium Text (1.5rem)</div>
        <div class="text-small">Small Text (1rem)</div>
      </div>
      
      <h3>📐 Spacing Demo</h3>
      <div class="spacing-demo">
        <div class="spacing-box box-small">Small Spacing</div>
        <div class="spacing-box box-medium">Medium Spacing</div>
        <div class="spacing-box box-large">Large Spacing</div>
      </div>
    </div>
  </div>
</body>
</html>

Advanced Variable Techniques

Maps & Lists

Store related values in maps and lists for organized, scalable variable systems.

$colors: (
  primary: #3498db,
  secondary: #2ecc71
);

Dynamic Usage

Use variables with functions, calculations, and conditional logic.

$spacing: $base-spacing * 2;
color: darken($primary, 10%);

Advanced Techniques Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Variables - Advanced Techniques</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: white;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .feature-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .code-comparison {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .sass-code, .css-code {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1rem;
      border-radius: 5px;
      font-family: 'Fira Code', monospace;
      font-size: 0.8rem;
      line-height: 1.4;
      overflow-x: auto;
    }
    
    .comment { color: #7f8c8d; }
    .variable { color: #e74c3c; }
    .property { color: #3498db; }
    .value { color: #2ecc71; }
    .function { color: #9b59b6; }
    
    .demo-section {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    .color-system {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .color-box {
      height: 80px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    .blue-100 { background: #ebf5fb; color: #2c3e50; }
    .blue-200 { background: #d6eaf8; color: #2c3e50; }
    .blue-300 { background: #aed6f1; color: #2c3e50; }
    .blue-400 { background: #85c1e9; color: #2c3e50; }
    .blue-500 { background: #5dade2; }
    .blue-600 { background: #3498db; }
    .blue-700 { background: #2e86c1; }
    .blue-800 { background: #2874a6; }
    .blue-900 { background: #21618c; }
    
    .breakpoint-demo {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .breakpoint-item {
      padding: 1rem;
      background: #3498db;
      color: white;
      border-radius: 5px;
      text-align: center;
      flex: 1;
      min-width: 120px;
    }
    
    .theme-demo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .theme-card {
      padding: 2rem;
      border-radius: 10px;
      color: white;
    }
    
    .theme-light {
      background: #ecf0f1;
      color: #2c3e50;
      border: 2px solid #bdc3c7;
    }
    
    .theme-dark {
      background: #2c3e50;
      border: 2px solid #34495e;
    }
    
    .shadow-demo {
      display: flex;
      gap: 1rem;
      margin: 1rem 0;
      flex-wrap: wrap;
    }
    
    .shadow-box {
      width: 100px;
      height: 100px;
      background: white;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .shadow-small { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .shadow-medium { box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
    .shadow-large { box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
    .shadow-xl { box-shadow: 0 16px 32px rgba(0,0,0,0.25); }
    
    @media (max-width: 768px) {
      .feature-grid {
        grid-template-columns: 1fr;
      }
      
      .code-comparison {
        grid-template-columns: 1fr;
      }
      
      .theme-demo {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>⚡ Advanced Sass Variables</h1>
      <p>Maps, Lists, and Dynamic Variable Usage</p>
    </div>
    
    <!-- Color Maps -->
    <div class="feature-card">
      <h3>🎨 Color Maps & Systems</h3>
      <div class="code-comparison">
        <div class="sass-code">
          <span class="comment">// Color map</span><br>
          <span class="variable">$colors</span>: (<br>
          &nbsp;&nbsp;<span class="value">blue</span>: (<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">100</span>: <span class="value">#ebf5fb</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">200</span>: <span class="value">#d6eaf8</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">300</span>: <span class="value">#aed6f1</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">400</span>: <span class="value">#85c1e9</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">500</span>: <span class="value">#5dade2</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">600</span>: <span class="value">#3498db</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">700</span>: <span class="value">#2e86c1</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">800</span>: <span class="value">#2874a6</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">900</span>: <span class="value">#21618c</span><br>
          &nbsp;&nbsp;)<br>
          );<br><br>
          
          <span class="comment">// Usage with map-get</span><br>
          <span class="selector">.primary</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="function">map-get</span>(<span class="function">map-get</span>(<span class="variable">$colors</span>, <span class="value">blue</span>), <span class="value">600</span>);<br>
          }
        </div>
        
        <div class="css-code">
          <span class="selector">.primary</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#3498db</span>;<br>
          }
        </div>
      </div>
      
      <div class="demo-section">
        <h4>Color System Demo</h4>
        <div class="color-system">
          <div class="color-box blue-100">100</div>
          <div class="color-box blue-200">200</div>
          <div class="color-box blue-300">300</div>
          <div class="color-box blue-400">400</div>
          <div class="color-box blue-500">500</div>
          <div class="color-box blue-600">600</div>
          <div class="color-box blue-700">700</div>
          <div class="color-box blue-800">800</div>
          <div class="color-box blue-900">900</div>
        </div>
      </div>
    </div>
    
    <!-- Breakpoint Maps -->
    <div class="feature-card">
      <h3>📱 Breakpoint Variables</h3>
      <div class="code-comparison">
        <div class="sass-code">
          <span class="comment">// Breakpoint map</span><br>
          <span class="variable">$breakpoints</span>: (<br>
          &nbsp;&nbsp;<span class="value">xs</span>: <span class="value">320px</span>,<br>
          &nbsp;&nbsp;<span class="value">sm</span>: <span class="value">576px</span>,<br>
          &nbsp;&nbsp;<span class="value">md</span>: <span class="value">768px</span>,<br>
          &nbsp;&nbsp;<span class="value">lg</span>: <span class="value">992px</span>,<br>
          &nbsp;&nbsp;<span class="value">xl</span>: <span class="value">1200px</span>,<br>
          &nbsp;&nbsp;<span class="value">xxl</span>: <span class="value">1400px</span><br>
          );<br><br>
          
          <span class="comment">// Usage in media queries</span><br>
          <span class="selector">.container</span> {<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">1rem</span>;<br>
          <br>
          &nbsp;&nbsp;<span class="keyword">@media</span> (<span class="property">min-width</span>: <span class="function">map-get</span>(<span class="variable">$breakpoints</span>, <span class="value">md</span>)) {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">padding</span>: <span class="value">2rem</span>;<br>
          &nbsp;&nbsp;}<br>
          }
        </div>
        
        <div class="css-code">
          <span class="selector">.container</span> {<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">1rem</span>;<br>
          }<br><br>
          
          <span class="keyword">@media</span> (<span class="property">min-width</span>: <span class="value">768px</span>) {<br>
          &nbsp;&nbsp;<span class="selector">.container</span> {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">padding</span>: <span class="value">2rem</span>;<br>
          &nbsp;&nbsp;}<br>
          }
        </div>
      </div>
      
      <div class="demo-section">
        <h4>Responsive Breakpoints</h4>
        <div class="breakpoint-demo">
          <div class="breakpoint-item">XS: 320px</div>
          <div class="breakpoint-item">SM: 576px</div>
          <div class="breakpoint-item">MD: 768px</div>
          <div class="breakpoint-item">LG: 992px</div>
          <div class="breakpoint-item">XL: 1200px</div>
          <div class="breakpoint-item">XXL: 1400px</div>
        </div>
      </div>
    </div>
    
    <!-- Theme Variables -->
    <div class="feature-card">
      <h3>🌓 Theme Variables</h3>
      <div class="code-comparison">
        <div class="sass-code">
          <span class="comment">// Theme maps</span><br>
          <span class="variable">$themes</span>: (<br>
          &nbsp;&nbsp;<span class="value">light</span>: (<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">bg</span>: <span class="value">#ecf0f1</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">text</span>: <span class="value">#2c3e50</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">primary</span>: <span class="value">#3498db</span><br>
          &nbsp;&nbsp;),<br>
          &nbsp;&nbsp;<span class="value">dark</span>: (<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">bg</span>: <span class="value">#2c3e50</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">text</span>: <span class="value">#ecf0f1</span>,<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="value">primary</span>: <span class="value">#5dade2</span><br>
          &nbsp;&nbsp;)<br>
          );<br><br>
          
          <span class="comment">// Theme mixin</span><br>
          <span class="keyword">@mixin</span> <span class="function">theme</span>(<span class="variable">$theme-name</span>) {<br>
          &nbsp;&nbsp;<span class="variable">$theme</span>: <span class="function">map-get</span>(<span class="variable">$themes</span>, <span class="variable">$theme-name</span>);<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="function">map-get</span>(<span class="variable">$theme</span>, <span class="value">bg</span>);<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="function">map-get</span>(<span class="variable">$theme</span>, <span class="value">text</span>);<br>
          }
        </div>
        
        <div class="css-code">
          <span class="comment">/* Theme classes would be generated */</span><br>
          <span class="selector">.theme-light</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#ecf0f1</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="value">#2c3e50</span>;<br>
          }<br><br>
          
          <span class="selector">.theme-dark</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#2c3e50</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="value">#ecf0f1</span>;<br>
          }
        </div>
      </div>
      
      <div class="demo-section">
        <h4>Theme Demo</h4>
        <div class="theme-demo">
          <div class="theme-card theme-light">
            <h4>Light Theme</h4>
            <p>Background: #ecf0f1</p>
            <p>Text: #2c3e50</p>
          </div>
          <div class="theme-card theme-dark">
            <h4>Dark Theme</h4>
            <p>Background: #2c3e50</p>
            <p>Text: #ecf0f1</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Shadow Variables -->
    <div class="feature-card">
      <h3>🌄 Shadow & Effect Variables</h3>
      <div class="code-comparison">
        <div class="sass-code">
          <span class="comment">// Shadow map</span><br>
          <span class="variable">$shadows</span>: (<br>
          &nbsp;&nbsp;<span class="value">small</span>: <span class="value">0 2px 4px rgba(0,0,0,0.1)</span>,<br>
          &nbsp;&nbsp;<span class="value">medium</span>: <span class="value">0 4px 8px rgba(0,0,0,0.15)</span>,<br>
          &nbsp;&nbsp;<span class="value">large</span>: <span class="value">0 8px 16px rgba(0,0,0,0.2)</span>,<br>
          &nbsp;&nbsp;<span class="value">xl</span>: <span class="value">0 16px 32px rgba(0,0,0,0.25)</span><br>
          );<br><br>
          
          <span class="comment">// Usage</span><br>
          <span class="selector">.card</span> {<br>
          &nbsp;&nbsp;<span class="property">box-shadow</span>: <span class="function">map-get</span>(<span class="variable">$shadows</span>, <span class="value">medium</span>);<br>
          }
        </div>
        
        <div class="css-code">
          <span class="selector">.card</span> {<br>
          &nbsp;&nbsp;<span class="property">box-shadow</span>: <span class="value">0 4px 8px rgba(0,0,0,0.15)</span>;<br>
          }
        </div>
      </div>
      
      <div class="demo-section">
        <h4>Shadow System</h4>
        <div class="shadow-demo">
          <div class="shadow-box shadow-small">Small</div>
          <div class="shadow-box shadow-medium">Medium</div>
          <div class="shadow-box shadow-large">Large</div>
          <div class="shadow-box shadow-xl">XL</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Best Practices

Organization & Naming

Proper organization and naming conventions are crucial for maintainable variable systems. Use clear, descriptive names and logical grouping.

// Good
$color-primary: #3498db;
$spacing-unit: 1rem;

// Avoid
$c1: #3498db;
$s: 1rem;

Best Practices Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Variables - Best Practices</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #2c3e50;
    }
    
    .practices-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .practice-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .do-dont {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .do {
      background: #d4edda;
      border: 2px solid #c3e6cb;
      padding: 1rem;
      border-radius: 5px;
    }
    
    .dont {
      background: #f8d7da;
      border: 2px solid #f5c6cb;
      padding: 1rem;
      border-radius: 5px;
    }
    
    .good-example, .bad-example {
      padding: 1rem;
      margin: 1rem 0;
      border-radius: 5px;
      font-family: 'Fira Code', monospace;
      font-size: 0.8rem;
    }
    
    .good-example {
      background: #d1ecf1;
      border-left: 4px solid #17a2b8;
    }
    
    .bad-example {
      background: #f8d7da;
      border-left: 4px solid #dc3545;
    }
    
    .naming-system {
      background: #e8f4fd;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    .variable-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0;
    }
    
    .variable-table th, .variable-table td {
      border: 1px solid #dee2e6;
      padding: 0.8rem;
      text-align: left;
    }
    
    .variable-table th {
      background: #f8f9fa;
      font-weight: 600;
    }
    
    .organization-system {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .organization-card {
      background: #f8f9fa;
      padding: 1.5rem;
      border-radius: 8px;
      border-left: 4px solid #3498db;
    }
    
    .workflow-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .step {
      background: white;
      padding: 1.5rem;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .step-number {
      background: #3498db;
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      font-weight: bold;
    }
    
    .tip-box {
      background: #fff3cd;
      border-left: 4px solid #ffc107;
      padding: 1.5rem;
      margin: 1rem 0;
      border-radius: 5px;
    }
    
    @media (max-width: 768px) {
      .practices-grid {
        grid-template-columns: 1fr;
      }
      
      .do-dont {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>✅ Sass Variables Best Practices</h1>
      <p>Guidelines for effective and maintainable variable usage</p>
    </div>
    
    <div class="practices-grid">
      <div class="practice-card">
        <h3>🏷️ Naming Conventions</h3>
        <p>Use meaningful and consistent variable names:</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Descriptive Names</strong>
            <div class="good-example">
              $primary-color<br>
              $font-size-base<br>
              $spacing-unit<br>
              $breakpoint-md
            </div>
          </div>
          <div class="dont">
            <strong>❌ Vague Names</strong>
            <div class="bad-example">
              $color1<br>
              $size<br>
              $space<br>
              $bp1
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>📁 Organization Structure</h3>
        <p>Organize variables logically in separate files:</p>
        
        <div class="organization-system">
          <div class="organization-card">
            <h4>_variables.scss</h4>
            <p>Global variables and settings</p>
          </div>
          <div class="organization-card">
            <h4>_colors.scss</h4>
            <p>Color palette and themes</p>
          </div>
          <div class="organization-card">
            <h4>_typography.scss</h4>
            <p>Font families and sizes</p>
          </div>
          <div class="organization-card">
            <h4>_breakpoints.scss</h4>
            <p>Responsive breakpoints</p>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>🎯 Scope Management</h3>
        <p>Understand variable scope and usage:</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Global Scope</strong>
            <div class="good-example">
              // _variables.scss<br>
              $primary-color: #3498db;<br><br>
              
              // component.scss<br>
              .button {<br>
              &nbsp;&nbsp;background: $primary-color;<br>
              }
            </div>
          </div>
          <div class="dont">
            <strong>❌ Over-nesting</strong>
            <div class="bad-example">
              .component {<br>
              &nbsp;&nbsp;$local-color: red;<br>
              &nbsp;&nbsp;// hard to maintain<br>
              }
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>🔧 Default Values & Overrides</h3>
        <p>Use default! flag for customizable variables:</p>
        
        <div class="good-example">
          // Define with default<br>
          $primary-color: #3498db !default;<br><br>
          
          // Can be overridden<br>
          $primary-color: #e74c3c;<br><br>
          
          // Usage remains the same<br>
          .button { background: $primary-color; }
        </div>
      </div>
    </div>
    
    <div class="naming-system">
      <h3>📋 Variable Naming System</h3>
      <table class="variable-table">
        <thead>
          <tr>
            <th>Category</th>
            <th>Pattern</th>
            <th>Examples</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Colors</td>
            <td>$[type]-[usage]-[state]</td>
            <td>$color-primary, $color-success-hover</td>
          </tr>
          <tr>
            <td>Typography</td>
            <td>$font-[property]</td>
            <td>$font-family-base, $font-size-lg</td>
          </tr>
          <tr>
            <td>Spacing</td>
            <td>$spacing-[size]</td>
            <td>$spacing-xs, $spacing-unit</td>
          </tr>
          <tr>
            <td>Breakpoints</td>
            <td>$breakpoint-[size]</td>
            <td>$breakpoint-md, $breakpoint-xl</td>
          </tr>
          <tr>
            <td>Components</td>
            <td>$[component]-[property]</td>
            <td>$button-bg, $card-shadow</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="practice-card">
      <h3>🚀 Workflow Best Practices</h3>
      
      <div class="workflow-steps">
        <div class="step">
          <div class="step-number">1</div>
          <h4>Plan</h4>
          <p>Define your design system and variables needed</p>
        </div>
        
        <div class="step">
          <div class="step-number">2</div>
          <h4>Organize</h4>
          <p>Create variable files by category</p>
        </div>
        
        <div class="step">
          <div class="step-number">3</div>
          <h4>Implement</h4>
          <p>Use variables consistently throughout</p>
        </div>
        
        <div class="step">
          <div class="step-number">4</div>
          <h4>Maintain</h4>
          <p>Regularly review and update variables</p>
        </div>
      </div>
      
      <div class="tip-box">
        <strong>💡 Pro Tip:</strong> Use CSS custom properties (CSS variables) alongside Sass variables 
        for dynamic theming and runtime changes. Sass variables compile to static values, while 
        CSS variables can be changed with JavaScript.
      </div>
    </div>
    
    <div class="practice-card">
      <h3>⚠️ Common Pitfalls to Avoid</h3>
      <div class="do-dont">
        <div class="do">
          <strong>✅ Do These:</strong>
          <ul>
            <li>Use meaningful, descriptive names</li>
            <li>Organize variables in logical groups</li>
            <li>Document complex variable systems</li>
            <li>Use maps for related values</li>
            <li>Set sensible default values</li>
          </ul>
        </div>
        <div class="dont">
          <strong>❌ Avoid These:</strong>
          <ul>
            <li>Overusing global variables</li>
            <li>Creating too many similar variables</li>
            <li>Using magic numbers without variables</li>
            <li>Ignoring naming consistency</li>
            <li>Forgetting to document complex systems</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Sass Variables vs CSS Custom Properties

💎 Sass Variables

Compile-time, static, powerful preprocessing

🎨 CSS Variables

Runtime, dynamic, JavaScript integration

🤝 Together

Use both for maximum flexibility

Sass vs CSS Variables Comparison

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Variables vs CSS Custom Properties</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #2c3e50;
    }
    
    .comparison-section {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .sass-code, .css-code {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1.5rem;
      border-radius: 10px;
      font-family: 'Fira Code', monospace;
      font-size: 0.9rem;
      line-height: 1.4;
    }
    
    .comment { color: #7f8c8d; }
    .variable { color: #e74c3c; }
    .property { color: #3498db; }
    .value { color: #2ecc71; }
    
    .feature-comparison {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .feature-card {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 10px;
    }
    
    .use-cases {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .use-case {
      background: #e8f4fd;
      padding: 1.5rem;
      border-radius: 10px;
      border-left: 4px solid #3498db;
    }
    
    .demo-area {
      background: #fff3cd;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    .theme-buttons {
      display: flex;
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .theme-btn {
      padding: 0.8rem 1.5rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
    }
    
    .theme-light { background: #ecf0f1; color: #2c3e50; }
    .theme-dark { background: #2c3e50; color: #ecf0f1; }
    .theme-blue { background: #3498db; color: white; }
    
    .dynamic-demo {
      padding: 2rem;
      margin: 1rem 0;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    
    .demo-light { background: #ecf0f1; color: #2c3e50; }
    .demo-dark { background: #2c3e50; color: #ecf0f1; }
    .demo-blue { background: #3498db; color: white; }
    
    .decision-guide {
      background: #d4edda;
      border-left: 4px solid #28a745;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    @media (max-width: 768px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>⚖️ Sass Variables vs CSS Custom Properties</h1>
      <p>When to use each and how they work together</p>
    </div>
    
    <div class="comparison-section">
      <h2>📊 Syntax Comparison</h2>
      
      <div class="comparison-grid">
        <div class="sass-code">
          <span class="comment">// Sass Variables</span><br><br>
          <span class="comment">// Definition</span><br>
          <span class="variable">$primary-color</span>: <span class="value">#3498db</span>;<br>
          <span class="variable">$font-size</span>: <span class="value">16px</span>;<br>
          <span class="variable">$spacing</span>: <span class="value">1rem</span>;<br><br>
          
          <span class="comment">// Usage</span><br>
          <span class="selector">.button</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="variable">$primary-color</span>;<br>
          &nbsp;&nbsp;<span class="property">font-size</span>: <span class="variable">$font-size</span>;<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="variable">$spacing</span>;<br>
          }<br><br>
          
          <span class="comment">// Compile-time processing</span><br>
          <span class="variable">$calculated</span>: <span class="variable">$spacing</span> <span class="value">* 2</span>;
        </div>
        
        <div class="css-code">
          <span class="comment">/* CSS Custom Properties */</span><br><br>
          <span class="comment">/* Definition */</span><br>
          <span class="selector">:root</span> {<br>
          &nbsp;&nbsp;<span class="property">--primary-color</span>: <span class="value">#3498db</span>;<br>
          &nbsp;&nbsp;<span class="property">--font-size</span>: <span class="value">16px</span>;<br>
          &nbsp;&nbsp;<span class="property">--spacing</span>: <span class="value">1rem</span>;<br>
          }<br><br>
          
          <span class="comment">/* Usage */</span><br>
          <span class="selector">.button</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">var(--primary-color)</span>;<br>
          &nbsp;&nbsp;<span class="property">font-size</span>: <span class="value">var(--font-size)</span>;<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">var(--spacing)</span>;<br>
          }<br><br>
          
          <span class="comment">/* Runtime usage */</span><br>
          <span class="property">padding</span>: <span class="value">calc(var(--spacing) * 2)</span>;
        </div>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>🎯 Feature Comparison</h2>
      
      <div class="feature-comparison">
        <div class="feature-card">
          <h3>💎 Sass Variables</h3>
          <ul>
            <li><strong>Compile-time:</strong> Processed before deployment</li>
            <li><strong>Static:</strong> Values don't change at runtime</li>
            <li><strong>Powerful:</strong> Full Sass functionality</li>
            <li><strong>Scoped:</strong> Sass-specific scope rules</li>
            <li><strong>Browser Support:</strong> Works everywhere after compilation</li>
          </ul>
        </div>
        
        <div class="feature-card">
          <h3>🎨 CSS Custom Properties</h3>
          <ul>
            <li><strong>Runtime:</strong> Processed by browser</li>
            <li><strong>Dynamic:</strong> Can be changed with JavaScript</li>
            <li><strong>Limited:</strong> Basic functionality only</li>
            <li><strong>Cascade:</strong> Follows CSS cascade rules</li>
            <li><strong>Browser Support:</strong> Modern browsers only</li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>🚀 Use Cases</h2>
      
      <div class="use-cases">
        <div class="use-case">
          <h4>✅ Use Sass Variables For:</h4>
          <ul>
            <li>Design system constants</li>
            <li>Complex calculations</li>
            <li>Build-time configuration</li>
            <li>Browser compatibility</li>
            <li>Static theming</li>
          </ul>
        </div>
        
        <div class="use-case">
          <h4>✅ Use CSS Variables For:</h4>
          <ul>
            <li>Dynamic theming</li>
            <li>User preferences</li>
            <li>Runtime animations</li>
            <li>Component variants</li>
            <li>JavaScript integration</li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="demo-area">
      <h3>🎮 Dynamic Theming Demo</h3>
      <p>This demo uses CSS Custom Properties for runtime theme switching:</p>
      
      <div class="theme-buttons">
        <button class="theme-btn theme-light" onclick="changeTheme('light')">Light Theme</button>
        <button class="theme-btn theme-dark" onclick="changeTheme('dark')">Dark Theme</button>
        <button class="theme-btn theme-blue" onclick="changeTheme('blue')">Blue Theme</button>
      </div>
      
      <div class="dynamic-demo demo-light" id="themeDemo">
        <h4>Current Theme: Light</h4>
        <p>This content changes color dynamically using CSS variables.</p>
        <p>Try clicking the theme buttons above!</p>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>🤝 Working Together</h2>
      
      <div class="sass-code">
        <span class="comment">// Sass for design system</span><br>
        <span class="variable">$color-primary</span>: <span class="value">#3498db</span>;<br>
        <span class="variable">$color-secondary</span>: <span class="value">#2ecc71</span>;<br><br>
        
        <span class="comment">// Convert to CSS variables</span><br>
        <span class="selector">:root</span> {<br>
        &nbsp;&nbsp;<span class="property">--primary</span>: <span class="comment">#{$color-primary}</span>;<br>
        &nbsp;&nbsp;<span class="property">--secondary</span>: <span class="comment">#{$color-secondary}</span>;<br>
        &nbsp;&nbsp;<span class="property">--spacing</span>: <span class="value">1rem</span>;<br>
        }<br><br>
        
        <span class="comment">// Use both together</span><br>
        <span class="selector">.component</span> {<br>
        &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">calc(var(--spacing) * 2)</span>;<br>
        &nbsp;&nbsp;<span class="property">background</span>: <span class="value">var(--primary)</span>;<br>
        &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
        }
      </div>
    </div>
    
    <div class="decision-guide">
      <h3>🎯 Decision Guide</h3>
      <p><strong>Use Sass Variables when:</strong> You need complex calculations, want to ensure browser compatibility, 
      or are working with static design systems that don't need runtime changes.</p>
      
      <p><strong>Use CSS Custom Properties when:</strong> You need dynamic theming, user customization, 
      or want to integrate with JavaScript for runtime changes.</p>
      
      <p><strong>Best Practice:</strong> Use Sass variables for your design system foundation and expose 
      them as CSS custom properties for dynamic functionality when needed.</p>
    </div>
  </div>

  <script>
    function changeTheme(theme) {
      const demo = document.getElementById('themeDemo');
      const themes = {
        light: { class: 'demo-light', text: 'Light' },
        dark: { class: 'demo-dark', text: 'Dark' },
        blue: { class: 'demo-blue', text: 'Blue' }
      };
      
      // Remove all theme classes
      demo.classList.remove('demo-light', 'demo-dark', 'demo-blue');
      
      // Add new theme class
      demo.classList.add(themes[theme].class);
      
      // Update text
      demo.querySelector('h4').textContent = 'Current Theme: ' + themes[theme].text;
    }
  </script>
</body>
</html>

Practical Applications

🎨 Design Systems

  • Centralized color palettes
  • Consistent spacing scales
  • Typography hierarchies
  • Component-specific variables
  • Theme configuration

🔧 Real-World Usage

  1. Define brand colors and fonts
  2. Set up responsive breakpoints
  3. Create spacing utility systems
  4. Configure component variants
  5. Implement theme switching

💡 Pro Tips for Variable Usage

Organization:

  • Group related variables together
  • Use separate files for different categories
  • Document your variable system
  • Follow a naming convention

Maintenance:

  • Review variables regularly
  • Remove unused variables
  • Update documentation when changing variables
  • Test changes across your project

Ready to Master Sass Variables? 💎

Start using Sass variables to create maintainable, scalable styling systems. Whether you're building a small website or a large design system, variables will transform how you write and manage your CSS.

< PreviousNext >