Sass Operators 🔢

Perform mathematical operations, dynamic calculations, and value manipulations with Sass operators.

What are Sass Operators?

Sass operators allow you to perform mathematical calculations, compare values, manipulate strings, and work with colors directly in your stylesheets. They enable dynamic, calculated values that make your CSS more flexible and maintainable.

➕ Arithmetic

Mathematical calculations

⚖️ Comparison

Value comparisons and logic

🎨 Operations

Color and string manipulation

Basic Sass Operators

Core Concepts:

Arithmetic: +, -, *, /, %
Comparison: ==, !=, >, <, >=, <=
String: + (concatenation)
Color: Arithmetic operations on colors
Parentheses: Required for division operations

Basic Operators Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Operators - Mathematical Operations & Calculations</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; }
    .operator { color: #e74c3c; font-weight: bold; }
    .property { color: #3498db; }
    .value { color: #2ecc71; }
    .variable { color: #f39c12; }
    
    .demo-area {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      margin: 2rem 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .operator-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .operator-card {
      background: #f8f9fa;
      padding: 1.5rem;
      border-radius: 8px;
      text-align: center;
      border-left: 4px solid #3498db;
    }
    
    .operator-symbol {
      font-size: 2rem;
      font-weight: bold;
      color: #e74c3c;
      margin-bottom: 0.5rem;
    }
    
    .calculation-demo {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin: 1rem 0;
    }
    
    .calc-box {
      background: #3498db;
      color: white;
      padding: 1rem;
      border-radius: 5px;
      text-align: center;
      flex: 1;
      min-width: 120px;
    }
    
    .card {
      background: white;
      border-radius: 10px;
      padding: 2rem;
      margin: 1rem 0;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      border-left: 4px solid #3498db;
    }
    
    @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 Operators</h1>
      <p>Mathematical operations, comparisons, and dynamic calculations</p>
    </div>
    
    <div class="comparison-grid">
      <div class="code-panel">
        <h3>➕ Arithmetic Operators</h3>
        <div class="sass-code">
          <span class="comment">// Basic arithmetic operations</span><br>
          <span class="variable">$base-size</span>: <span class="value">16px</span>;<br>
          <span class="variable">$spacing-unit</span>: <span class="value">8px</span>;<br>
          <span class="variable">$container-width</span>: <span class="value">1200px</span>;<br><br>
          
          <span class="selector">.element</span> {<br>
          &nbsp;&nbsp;<span class="comment">// Addition</span><br>
          &nbsp;&nbsp;<span class="property">font-size</span>: <span class="variable">$base-size</span> <span class="operator">+</span> <span class="value">4px</span>; <span class="comment">// 20px</span><br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="variable">$spacing-unit</span> <span class="operator">*</span> <span class="value">2</span>; <span class="comment">// 16px</span><br><br>
          
          &nbsp;&nbsp;<span class="comment">// Division (requires parentheses)</span><br>
          &nbsp;&nbsp;<span class="property">width</span>: (<span class="variable">$container-width</span> <span class="operator">/</span> <span class="value">2</span>); <span class="comment">// 600px</span><br>
          &nbsp;&nbsp;<span class="property">margin</span>: <span class="variable">$spacing-unit</span> <span class="operator">-</span> <span class="value">2px</span>; <span class="comment">// 6px</span><br>
          }<br><br>
          
          <span class="selector">.grid-item</span> {<br>
          &nbsp;&nbsp;<span class="property">width</span>: (<span class="value">100%</span> <span class="operator">/</span> <span class="value">3</span>); <span class="comment">// 33.333%</span><br>
          &nbsp;&nbsp;<span class="property">height</span>: <span class="value">calc(100vh</span> <span class="operator">-</span> <span class="value">80px</span><span class="value">)</span>;<br>
          }
        </div>
      </div>
      
      <div class="code-panel">
        <h3>📄 Compiled CSS</h3>
        <div class="css-code">
          <span class="selector">.element</span> {<br>
          &nbsp;&nbsp;<span class="property">font-size</span>: <span class="value">20px</span>;<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">16px</span>;<br>
          &nbsp;&nbsp;<span class="property">width</span>: <span class="value">600px</span>;<br>
          &nbsp;&nbsp;<span class="property">margin</span>: <span class="value">6px</span>;<br>
          }<br><br>
          
          <span class="selector">.grid-item</span> {<br>
          &nbsp;&nbsp;<span class="property">width</span>: <span class="value">33.333%</span>;<br>
          &nbsp;&nbsp;<span class="property">height</span>: <span class="value">calc(100vh - 80px)</span>;<br>
          }
        </div>
      </div>
    </div>
    
    <div class="comparison-grid">
      <div class="code-panel">
        <h3>⚖️ Comparison Operators</h3>
        <div class="sass-code">
          <span class="comment">// Comparison operators in @if statements</span><br>
          <span class="variable">$width</span>: <span class="value">800px</span>;<br>
          <span class="variable">$breakpoint</span>: <span class="value">768px</span>;<br>
          <span class="variable">$columns</span>: <span class="value">12</span>;<br><br>
          
          <span class="selector">.responsive-element</span> {<br>
          &nbsp;&nbsp;<span class="property">width</span>: <span class="value">100%</span>;<br><br>
          
          &nbsp;&nbsp;<span class="comment">// Greater than</span><br>
          &nbsp;&nbsp;<span class="keyword">@if</span> <span class="variable">$width</span> <span class="operator">></span> <span class="variable">$breakpoint</span> {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">max-width</span>: <span class="variable">$container-width</span>;<br>
          &nbsp;&nbsp;}<br><br>
          
          &nbsp;&nbsp;<span class="comment">// Less than or equal</span><br>
          &nbsp;&nbsp;<span class="keyword">@if</span> <span class="variable">$columns</span> <span class="operator"><=</span> <span class="value">6</span> {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-columns</span>: <span class="value">repeat(</span><span class="variable">$columns</span>, <span class="value">1fr)</span>;<br>
          &nbsp;&nbsp;}<br><br>
          
          &nbsp;&nbsp;<span class="comment">// Equality</span><br>
          &nbsp;&nbsp;<span class="keyword">@if</span> <span class="variable">$width</span> <span class="operator">==</span> <span class="value">800px</span> {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">background</span>: <span class="value">lightblue</span>;<br>
          &nbsp;&nbsp;}<br>
          }<br><br>
          
          <span class="comment">// Not equal operator</span><br>
          <span class="keyword">@if</span> <span class="variable">$columns</span> <span class="operator">!=</span> <span class="value">0</span> {<br>
          &nbsp;&nbsp;<span class="selector">.grid</span> {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">grid</span>;<br>
          &nbsp;&nbsp;}<br>
          }
        </div>
      </div>
      
      <div class="code-panel">
        <h3>🔢 Number Operations</h3>
        <div class="sass-code">
          <span class="comment">// Working with numbers and units</span><br>
          <span class="variable">$base-font</span>: <span class="value">16px</span>;<br>
          <span class="variable">$line-height</span>: <span class="value">1.5</span>;<br>
          <span class="variable">$percentage</span>: <span class="value">75%</span>;<br><br>
          
          <span class="selector">.typography</span> {<br>
          &nbsp;&nbsp;<span class="comment">// Unit-aware calculations</span><br>
          &nbsp;&nbsp;<span class="property">font-size</span>: <span class="variable">$base-font</span> <span class="operator">*</span> <span class="value">1.25</span>; <span class="comment">// 20px</span><br>
          &nbsp;&nbsp;<span class="property">line-height</span>: <span class="variable">$line-height</span>;<br>
          &nbsp;&nbsp;<span class="property">margin-bottom</span>: <span class="variable">$base-font</span> <span class="operator">*</span> <span class="variable">$line-height</span>; <span class="comment">// 24px</span><br>
          }<br><br>
          
          <span class="selector">.container</span> {<br>
          &nbsp;&nbsp;<span class="property">width</span>: <span class="variable">$percentage</span>;<br>
          &nbsp;&nbsp;<span class="property">max-width</span>: <span class="value">1200px</span> <span class="operator">*</span> <span class="value">0.8</span>; <span class="comment">// 960px</span><br>
          &nbsp;&nbsp;<span class="property">padding</span>: (<span class="value">100%</span> <span class="operator">-</span> <span class="variable">$percentage</span>) <span class="operator">/</span> <span class="value">2</span>; <span class="comment">// 12.5%</span><br>
          }<br><br>
          
          <span class="comment">// Complex calculations</span><br>
          <span class="variable">$golden-ratio</span>: <span class="value">1.618</span>;<br>
          <span class="selector">.golden-section</span> {<br>
          &nbsp;&nbsp;<span class="property">width</span>: <span class="value">61.8%</span>; <span class="comment">// 100% / 1.618</span><br>
          }
        </div>
      </div>
    </div>
    
    <div class="demo-area">
      <h3>🚀 Live Demo - Operators in Action</h3>
      
      <h4>Arithmetic Operators</h4>
      <div class="operator-grid">
        <div class="operator-card">
          <div class="operator-symbol">+</div>
          <h5>Addition</h5>
          <p>16px + 4px = 20px</p>
        </div>
        <div class="operator-card">
          <div class="operator-symbol">-</div>
          <h5>Subtraction</h5>
          <p>8px - 2px = 6px</p>
        </div>
        <div class="operator-card">
          <div class="operator-symbol">*</div>
          <h5>Multiplication</h5>
          <p>8px * 2 = 16px</p>
        </div>
        <div class="operator-card">
          <div class="operator-symbol">/</div>
          <h5>Division</h5>
          <p>1200px / 2 = 600px</p>
        </div>
        <div class="operator-card">
          <div class="operator-symbol">%</div>
          <h5>Modulo</h5>
          <p>10 % 3 = 1</p>
        </div>
      </div>
      
      <h4>Comparison Operators</h4>
      <div class="calculation-demo">
        <div class="calc-box">== Equal to</div>
        <div class="calc-box">!= Not equal</div>
        <div class="calc-box">> Greater than</div>
        <div class="calc-box">< Less than</div>
        <div class="calc-box">>= Greater or equal</div>
        <div class="calc-box"><= Less or equal</div>
      </div>
      
      <h4>Real Calculations</h4>
      <div class="calculation-demo">
        <div class="calc-box" style="font-size: 20px;">Font: 20px (16px × 1.25)</div>
        <div class="calc-box" style="padding: 16px;">Padding: 16px (8px × 2)</div>
        <div class="calc-box" style="width: 33.333%;">Width: 33.333% (100% ÷ 3)</div>
        <div class="calc-box" style="background: #85c1e9;">Light Blue (lighten)</div>
      </div>
    </div>
    
    <div class="card">
      <h3>💡 Why Use Operators?</h3>
      <ul>
        <li><strong>Dynamic Calculations:</strong> Compute values based on variables</li>
        <li><strong>Consistent Proportions:</strong> Maintain mathematical relationships</li>
        <li><strong>Responsive Design:</strong> Create fluid layouts and typography</li>
        <li><strong>Conditional Logic:</strong> Make decisions based on values</li>
        <li><strong>Code Maintainability:</strong> Update values in one place</li>
        <li><strong>Mathematical Precision:</strong> Accurate calculations for design systems</li>
      </ul>
    </div>
  </div>
</body>
</html>

Advanced Operator Techniques

Color Operations

Perform arithmetic operations on colors and use color functions for advanced manipulation.

$primary: #3498db;

background: lighten($primary, 20%);

color: darken($primary, 10%);

String Operations

Concatenate strings for dynamic class names, font families, and URLs.

$font: "Inter";

font-family: $font + ", sans-serif";

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 Operators - Advanced Calculations & Color Operations</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; }
    .operator { color: #e74c3c; font-weight: bold; }
    .property { color: #3498db; }
    .value { color: #2ecc71; }
    .variable { color: #f39c12; }
    
    .demo-section {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    .color-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .color-box {
      padding: 2rem 1rem;
      border-radius: 8px;
      text-align: center;
      color: white;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    .math-demo {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin: 1rem 0;
    }
    
    .math-item {
      background: white;
      padding: 1rem;
      border-radius: 8px;
      text-align: center;
      flex: 1;
      min-width: 120px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    @media (max-width: 768px) {
      .feature-grid {
        grid-template-columns: 1fr;
      }
      
      .code-comparison {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>⚡ Advanced Sass Operators</h1>
      <p>Color Operations, String Manipulation, and Complex Calculations</p>
    </div>
    
    <!-- Color Operations -->
    <div class="feature-card">
      <h3>🎨 Color Operations</h3>
      <div class="code-comparison">
        <div class="sass-code">
          <span class="comment">// Color arithmetic</span><br>
          <span class="variable">$primary</span>: <span class="value">#3498db</span>;<br>
          <span class="variable">$secondary</span>: <span class="value">#2ecc71</span>;<br>
          <span class="variable">$dark</span>: <span class="value">#2c3e50</span>;<br><br>
          
          <span class="selector">.color-mixing</span> {<br>
          &nbsp;&nbsp;<span class="comment">// Color arithmetic (deprecated but still works)</span><br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="variable">$primary</span> <span class="operator">+</span> <span class="value">#111</span>; <span class="comment">// Lighten</span><br>
          &nbsp;&nbsp;<span class="property">border-color</span>: <span class="variable">$primary</span> <span class="operator">-</span> <span class="value">#111</span>; <span class="comment">// Darken</span><br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="variable">$primary</span> <span class="operator">*</span> <span class="value">0.5</span> <span class="operator">+</span> <span class="variable">$secondary</span> <span class="operator">*</span> <span class="value">0.5</span>; <span class="comment">// Mix</span><br>
          }<br><br>
          
          <span class="comment">// Using color functions (recommended)</span><br>
          <span class="selector">.color-functions</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">lighten(</span><span class="variable">$primary</span>, <span class="value">20%</span><span class="value">)</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="value">darken(</span><span class="variable">$dark</span>, <span class="value">10%</span><span class="value">)</span>;<br>
          &nbsp;&nbsp;<span class="property">border</span>: <span class="value">1px solid rgba(</span><span class="variable">$primary</span>, <span class="value">0.5</span><span class="value">)</span>;<br>
          &nbsp;&nbsp;<span class="property">box-shadow</span>: <span class="value">0 2px 4px adjust-color(</span><span class="variable">$dark</span>, <span class="property">$alpha</span>: <span class="value">-0.8</span><span class="value">)</span>;<br>
          }
        </div>
        
        <div class="css-code">
          <span class="selector">.color-mixing</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#45a9ec</span>;<br>
          &nbsp;&nbsp;<span class="property">border-color</span>: <span class="value">#2387c8</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="value">#31b283</span>;<br>
          }<br><br>
          
          <span class="selector">.color-functions</span> {<br>
          &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#85c1e9</span>;<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="value">#1c2833</span>;<br>
          &nbsp;&nbsp;<span class="property">border</span>: <span class="value">1px solid rgba(52, 152, 219, 0.5)</span>;<br>
          &nbsp;&nbsp;<span class="property">box-shadow</span>: <span class="value">0 2px 4px rgba(44, 62, 80, 0.2)</span>;<br>
          }
        </div>
      </div>
      
      <div class="demo-section">
        <h4>Color Operations Demo</h4>
        <div class="color-grid">
          <div class="color-box" style="background: #3498db;">Base Color</div>
          <div class="color-box" style="background: #45a9ec;">Lightened (+)</div>
          <div class="color-box" style="background: #2387c8;">Darkened (-)</div>
          <div class="color-box" style="background: #85c1e9;">Lighten 20%</div>
          <div class="color-box" style="background: #21618c;">Darken 20%</div>
          <div class="color-box" style="background: rgba(52, 152, 219, 0.5);">Opacity 50%</div>
        </div>
      </div>
    </div>
    
    <!-- String Operations -->
    <div class="feature-card">
      <h3>📝 String Operations</h3>
      <div class="code-comparison">
        <div class="sass-code">
          <span class="comment">// String concatenation</span><br>
          <span class="variable">$font-family</span>: <span class="value">"Inter"</span>;<br>
          <span class="variable">$icon-prefix</span>: <span class="value">"icon-"</span>;<br>
          <span class="variable">$asset-path</span>: <span class="value">"/assets/"</span>;<br><br>
          
          <span class="selector">.typography</span> {<br>
          &nbsp;&nbsp;<span class="property">font-family</span>: <span class="variable">$font-family</span> <span class="operator">+</span> <span class="value">", sans-serif"</span>;<br>
          &nbsp;&nbsp;<span class="property">font-feature-settings</span>: <span class="value">"</span><span class="string">"smcp"</span> <span class="value">on</span><span class="string">"</span>;<br>
          }<br><br>
          
          <span class="selector">.icon</span> {<br>
          &nbsp;&nbsp;<span class="property">content</span>: <span class="variable">$icon-prefix</span> <span class="operator">+</span> <span class="value">"user"</span>;<br>
          &nbsp;&nbsp;<span class="property">background-image</span>: <span class="value">url(</span><span class="variable">$asset-path</span> <span class="operator">+</span> <span class="value">"images/avatar.png"</span><span class="value">)</span>;<br>
          }<br><br>
          
          <span class="comment">// Dynamic class names</span><br>
          <span class="keyword">@for</span> <span class="variable">$i</span> <span class="keyword">from</span> <span class="value">1</span> <span class="keyword">through</span> <span class="value">5</span> {<br>
          &nbsp;&nbsp;<span class="selector">.col-</span>#<span class="value">{</span><span class="variable">$i</span><span class="value">}</span> {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">width</span>: (<span class="value">100%</span> <span class="operator">/</span> <span class="value">12</span>) <span class="operator">*</span> <span class="variable">$i</span>;<br>
          &nbsp;&nbsp;}<br>
          }
        </div>
        
        <div class="css-code">
          <span class="selector">.typography</span> {<br>
          &nbsp;&nbsp;<span class="property">font-family</span>: <span class="value">"Inter, sans-serif"</span>;<br>
          &nbsp;&nbsp;<span class="property">font-feature-settings</span>: <span class="value">"smcp" on</span>;<br>
          }<br><br>
          
          <span class="selector">.icon</span> {<br>
          &nbsp;&nbsp;<span class="property">content</span>: <span class="value">"icon-user"</span>;<br>
          &nbsp;&nbsp;<span class="property">background-image</span>: <span class="value">url("/assets/images/avatar.png")</span>;<br>
          }<br><br>
          
          <span class="selector">.col-1</span> { <span class="property">width</span>: <span class="value">8.33333%</span>; }<br>
          <span class="selector">.col-2</span> { <span class="property">width</span>: <span class="value">16.66667%</span>; }<br>
          <span class="selector">.col-3</span> { <span class="property">width</span>: <span class="value">25%</span>; }<br>
          <span class="selector">.col-4</span> { <span class="property">width</span>: <span class="value">33.33333%</span>; }<br>
          <span class="selector">.col-5</span> { <span class="property">width</span>: <span class="value">41.66667%</span>; }
        </div>
      </div>
    </div>
    
    <!-- Advanced Math -->
    <div class="feature-card">
      <h3>🧮 Advanced Mathematical Operations</h3>
      <div class="code-comparison">
        <div class="sass-code">
          <span class="comment">// Complex calculations with functions</span><br>
          <span class="variable">$base-unit</span>: <span class="value">8px</span>;<br>
          <span class="variable">$scale-ratio</span>: <span class="value">1.25</span>;<br>
          <span class="variable">$iterations</span>: <span class="value">6</span>;<br><br>
          
          <span class="comment">// Modular scale</span><br>
          <span class="keyword">@function</span> modular-scale(<span class="variable">$exponent</span>) {<br>
          &nbsp;&nbsp;<span class="keyword">@return</span> <span class="variable">$base-unit</span> <span class="operator">*</span> <span class="function-name">pow</span>(<span class="variable">$scale-ratio</span>, <span class="variable">$exponent</span>);<br>
          }<br><br>
          
          <span class="comment">// Generate scale classes</span><br>
          <span class="keyword">@for</span> <span class="variable">$i</span> <span class="keyword">from</span> <span class="value">1</span> <span class="keyword">through</span> <span class="variable">$iterations</span> {<br>
          &nbsp;&nbsp;<span class="selector">.scale-</span>#<span class="value">{</span><span class="variable">$i</span><span class="value">}</span> {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">font-size</span>: <span class="function-name">modular-scale</span>(<span class="variable">$i</span>);<br>
          &nbsp;&nbsp;}<br>
          }<br><br>
          
          <span class="comment">// Aspect ratio calculations</span><br>
          <span class="selector">.aspect-16-9</span> {<br>
          &nbsp;&nbsp;<span class="property">padding-bottom</span>: (<span class="value">9</span> <span class="operator">/</span> <span class="value">16</span>) <span class="operator">*</span> <span class="value">100%</span>;<br>
          }<br><br>
          
          <span class="selector">.aspect-4-3</span> {<br>
          &nbsp;&nbsp;<span class="property">padding-bottom</span>: (<span class="value">3</span> <span class="operator">/</span> <span class="value">4</span>) <span class="operator">*</span> <span class="value">100%</span>;<br>
          }
        </div>
        
        <div class="css-code">
          <span class="selector">.scale-1</span> { <span class="property">font-size</span>: <span class="value">10px</span>; }<br>
          <span class="selector">.scale-2</span> { <span class="property">font-size</span>: <span class="value">12.5px</span>; }<br>
          <span class="selector">.scale-3</span> { <span class="property">font-size</span>: <span class="value">15.625px</span>; }<br>
          <span class="selector">.scale-4</span> { <span class="property">font-size</span>: <span class="value">19.53125px</span>; }<br>
          <span class="selector">.scale-5</span> { <span class="property">font-size</span>: <span class="value">24.41406px</span>; }<br>
          <span class="selector">.scale-6</span> { <span class="property">font-size</span>: <span class="value">30.51758px</span>; }<br><br>
          
          <span class="selector">.aspect-16-9</span> {<br>
          &nbsp;&nbsp;<span class="property">padding-bottom</span>: <span class="value">56.25%</span>;<br>
          }<br><br>
          
          <span class="selector">.aspect-4-3</span> {<br>
          &nbsp;&nbsp;<span class="property">padding-bottom</span>: <span class="value">75%</span>;<br>
          }
        </div>
      </div>
      
      <div class="demo-section">
        <h4>Mathematical Scale Demo</h4>
        <div class="math-demo">
          <div class="math-item" style="font-size: 10px;">Scale 1: 10px</div>
          <div class="math-item" style="font-size: 12.5px;">Scale 2: 12.5px</div>
          <div class="math-item" style="font-size: 15.625px;">Scale 3: 15.625px</div>
          <div class="math-item" style="font-size: 19.53125px;">Scale 4: 19.53px</div>
          <div class="math-item" style="font-size: 24.41406px;">Scale 5: 24.41px</div>
        </div>
        
        <h4>Aspect Ratio Demo</h4>
        <div class="math-demo">
          <div class="math-item">16:9 = 56.25%</div>
          <div class="math-item">4:3 = 75%</div>
          <div class="math-item">1:1 = 100%</div>
          <div class="math-item">3:2 = 66.67%</div>
          <div class="math-item">21:9 = 42.86%</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Operators Best Practices

Unit Consistency

Always maintain consistent units in your calculations and use parentheses for division operations to avoid errors and ensure predictable results.

// Good: Consistent units

padding: $spacing * 2; // 16px

width: (100% / 3); // 33.333%

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 Operators - Best Practices & Common Patterns</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;
    }
    
    .pattern-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .pattern-card {
      background: #f8f9fa;
      padding: 1.5rem;
      border-radius: 10px;
      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;
    }
    
    .performance-tips {
      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 Operators Best Practices</h1>
      <p>Write clean, efficient, and maintainable calculations</p>
    </div>
    
    <div class="practices-grid">
      <div class="practice-card">
        <h3>📏 Unit Consistency</h3>
        <p>Maintain consistent units in calculations:</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Consistent Units</strong>
            <div class="good-example">
              $spacing: 8px;<br>
              .element {<br>
              &nbsp;&nbsp;padding: $spacing * 2; // 16px<br>
              &nbsp;&nbsp;margin: $spacing + 4px; // 12px<br>
              }
            </div>
          </div>
          <div class="dont">
            <strong>❌ Mixed Units</strong>
            <div class="bad-example">
              .element {<br>
              &nbsp;&nbsp;padding: 8px * 2rem; // Error<br>
              &nbsp;&nbsp;margin: 16px + 2em; // Error<br>
              }
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>🎯 Division Best Practices</h3>
        <p>Use parentheses for division operations:</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Parentheses for Division</strong>
            <div class="good-example">
              .element {<br>
              &nbsp;&nbsp;width: (100% / 3);<br>
              &nbsp;&nbsp;height: (800px / 16);<br>
              &nbsp;&nbsp;margin: (1rem / 2);<br>
              }
            </div>
          </div>
          <div class="dont">
            <strong>❌ No Parentheses</strong>
            <div class="bad-example">
              .element {<br>
              &nbsp;&nbsp;width: 100% / 3; // Error<br>
              &nbsp;&nbsp;height: 800px / 16; // Error<br>
              }
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>⚡ Performance Considerations</h3>
        <p>Optimize complex calculations:</p>
        
        <div class="performance-tips">
          <strong>💡 Performance Tips:</strong>
          <ul>
            <li>Pre-calculate complex values in variables</li>
            <li>Avoid nested calculations in loops</li>
            <li>Use functions for reusable calculations</li>
            <li>Cache expensive computations</li>
          </ul>
        </div>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Efficient</strong>
            <div class="good-example">
              $golden-ratio: 1.618;<br>
              $main-width: 61.8%;<br>
              .element {<br>
              &nbsp;&nbsp;width: $main-width;<br>
              }
            </div>
          </div>
          <div class="dont">
            <strong>❌ Inefficient</strong>
            <div class="bad-example">
              .element {<br>
              &nbsp;&nbsp;width: (100% / 1.618);<br>
              &nbsp;&nbsp;// Recalculated every time<br>
              }
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>🔧 Color Operation Best Practices</h3>
        <p>Use color functions instead of arithmetic:</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Color Functions</strong>
            <div class="good-example">
              $primary: #3498db;<br>
              .element {<br>
              &nbsp;&nbsp;background: lighten($primary, 20%);<br>
              &nbsp;&nbsp;color: darken($primary, 10%);<br>
              }
            </div>
          </div>
          <div class="dont">
            <strong>❌ Color Arithmetic</strong>
            <div class="bad-example">
              $primary: #3498db;<br>
              .element {<br>
              &nbsp;&nbsp;background: $primary + #333;<br>
              &nbsp;&nbsp;color: $primary - #111;<br>
              }
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="practice-card">
      <h3>🏗️ Common Operator Patterns</h3>
      
      <div class="pattern-grid">
        <div class="pattern-card">
          <h4>Spacing Scale</h4>
          <div class="good-example">
            $base-spacing: 8px;<br>
            $spacing-scale: (<br>
            &nbsp;&nbsp;xs: $base-spacing * 0.5,<br>
            &nbsp;&nbsp;sm: $base-spacing,<br>
            &nbsp;&nbsp;md: $base-spacing * 2,<br>
            &nbsp;&nbsp;lg: $base-spacing * 3,<br>
            &nbsp;&nbsp;xl: $base-spacing * 4<br>
            );
          </div>
        </div>
        
        <div class="pattern-card">
          <h4>Grid System</h4>
          <div class="good-example">
            $columns: 12;<br>
            @for $i from 1 through $columns {<br>
            &nbsp;&nbsp;.col-#{$i} {<br>
            &nbsp;&nbsp;&nbsp;&nbsp;width: (100% / $columns) * $i;<br>
            &nbsp;&nbsp;}<br>
            }
          </div>
        </div>
        
        <div class="pattern-card">
          <h4>Typography Scale</h4>
          <div class="good-example">
            $base-size: 16px;<br>
            $scale-ratio: 1.25;<br>
            @function scale($level) {<br>
            &nbsp;&nbsp;@return $base-size * <br>
            &nbsp;&nbsp;&nbsp;&nbsp;pow($scale-ratio, $level);<br>
            }
          </div>
        </div>
      </div>
    </div>
    
    <div class="practice-card">
      <h3>🚀 Workflow Best Practices</h3>
      
      <div class="workflow-steps">
        <div class="step">
          <div class="step-number">1</div>
          <h4>Define Variables</h4>
          <p>Set base values and ratios first</p>
        </div>
        
        <div class="step">
          <div class="step-number">2</div>
          <h4>Use Functions</h4>
          <p>Create functions for complex calculations</p>
        </div>
        
        <div class="step">
          <div class="step-number">3</div>
          <h4>Test Calculations</h4>
          <p>Verify outputs match expectations</p>
        </div>
        
        <div class="step">
          <div class="step-number">4</div>
          <h4>Document</h4>
          <p>Add comments explaining complex math</p>
        </div>
      </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 parentheses for division</li>
            <li>Maintain unit consistency</li>
            <li>Use color functions for color operations</li>
            <li>Pre-calculate complex values</li>
            <li>Test edge cases in calculations</li>
          </ul>
        </div>
        <div class="dont">
          <strong>❌ Avoid These:</strong>
          <ul>
            <li>Mixing incompatible units</li>
            <li>Using deprecated color arithmetic</li>
            <li>Complex calculations in loops</li>
            <li>Ignoring browser compatibility</li>
            <li>Forgetting to handle division edge cases</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Operators vs Functions

🔢 Operators

Simple, direct calculations

🔄 Functions

Reusable, complex logic

🤝 Together

Powerful combination

Operators vs Functions Comparison

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Operators vs Functions - When to Use Each</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 {
      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; }
    .operator { color: #e74c3c; font-weight: bold; }
    .function-name { color: #9b59b6; }
    .property { color: #3498db; }
    .value { color: #2ecc71; }
    .variable { color: #f39c12; }
    
    .use-case-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .use-case {
      background: #f8f9fa;
      padding: 1.5rem;
      border-radius: 10px;
    }
    
    .decision-guide {
      background: #d4edda;
      border-left: 4px solid #28a745;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .benefit-card {
      background: #e8f4fd;
      padding: 2rem;
      border-radius: 10px;
      text-align: center;
    }
    
    .benefit-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    
    .demo-area {
      background: #fff3cd;
      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 Operators vs Functions</h1>
      <p>Understanding when to use operators and when to use functions</p>
    </div>
    
    <div class="comparison-section">
      <h2>📊 Fundamental Differences</h2>
      
      <div class="comparison-grid">
        <div class="sass-code">
          <span class="comment">// Operators - Direct calculations</span><br>
          <span class="variable">$spacing</span>: <span class="value">8px</span>;<br>
          <span class="variable">$columns</span>: <span class="value">12</span>;<br><br>
          
          <span class="selector">.element</span> {<br>
          &nbsp;&nbsp;<span class="comment">// Simple arithmetic</span><br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="variable">$spacing</span> <span class="operator">*</span> <span class="value">2</span>; <span class="comment">// 16px</span><br>
          &nbsp;&nbsp;<span class="property">width</span>: (<span class="value">100%</span> <span class="operator">/</span> <span class="variable">$columns</span>); <span class="comment">// 8.333%</span><br>
          &nbsp;&nbsp;<span class="property">margin</span>: <span class="variable">$spacing</span> <span class="operator">+</span> <span class="value">4px</span>; <span class="comment">// 12px</span><br>
          }<br><br>
          
          <span class="comment">// Comparison operators</span><br>
          <span class="keyword">@if</span> <span class="variable">$spacing</span> <span class="operator">></span> <span class="value">10px</span> {<br>
          &nbsp;&nbsp;<span class="selector">.large-spacing</span> { <span class="property">display</span>: <span class="value">block</span>; }<br>
          }
        </div>
        
        <div class="sass-code">
          <span class="comment">// Functions - Reusable logic</span><br>
          <span class="keyword">@function</span> <span class="function-name">spacing</span>(<span class="variable">$multiplier</span>) {<br>
          &nbsp;&nbsp;<span class="variable">$base</span>: <span class="value">8px</span>;<br>
          &nbsp;&nbsp;<span class="keyword">@return</span> <span class="variable">$base</span> <span class="operator">*</span> <span class="variable">$multiplier</span>;<br>
          }<br><br>
          
          <span class="keyword">@function</span> <span class="function-name">grid-width</span>(<span class="variable">$columns</span>, <span class="variable">$total</span>: <span class="value">12</span>) {<br>
          &nbsp;&nbsp;<span class="keyword">@return</span> (<span class="value">100%</span> <span class="operator">/</span> <span class="variable">$total</span>) <span class="operator">*</span> <span class="variable">$columns</span>;<br>
          }<br><br>
          
          <span class="selector">.element</span> {<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="function-name">spacing</span>(<span class="value">2</span>); <span class="comment">// 16px</span><br>
          &nbsp;&nbsp;<span class="property">width</span>: <span class="function-name">grid-width</span>(<span class="value">6</span>); <span class="comment">// 50%</span><br>
          &nbsp;&nbsp;<span class="property">margin</span>: <span class="function-name">spacing</span>(<span class="value">1.5</span>); <span class="comment">// 12px</span><br>
          }
        </div>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>🎯 When to Use Each</h2>
      
      <div class="use-case-grid">
        <div class="use-case">
          <h4>✅ Use Operators For:</h4>
          <ul>
            <li>Simple arithmetic calculations</li>
            <li>Direct value manipulations</li>
            <li>Comparison operations in @if statements</li>
            <li>One-time calculations</li>
            <li>Basic string concatenation</li>
            <li>Simple percentage calculations</li>
            <li>When logic is used only once</li>
          </ul>
        </div>
        
        <div class="use-case">
          <h4>✅ Use Functions For:</h4>
          <ul>
            <li>Complex mathematical operations</li>
            <li>Reusable calculation logic</li>
            <li>Color manipulations and transformations</li>
            <li>Value validation and processing</li>
            <li>Multi-step calculations</li>
            <li>When same logic is used multiple times</li>
            <li>Abstracting complex operations</li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>🚀 Benefits Comparison</h2>
      
      <div class="benefits-grid">
        <div class="benefit-card">
          <div class="benefit-icon">🔢</div>
          <h3>Operators</h3>
          <p>Simple, direct calculations</p>
        </div>
        
        <div class="benefit-card">
          <div class="benefit-icon">🔄</div>
          <h3>Functions</h3>
          <p>Reusable, maintainable logic</p>
        </div>
        
        <div class="benefit-card">
          <div class="benefit-icon">⚡</div>
          <h3>Operators</h3>
          <p>Fast for simple operations</p>
        </div>
        
        <div class="benefit-card">
          <div class="benefit-icon">🎯</div>
          <h3>Functions</h3>
          <p>Complex logic abstraction</p>
        </div>
      </div>
    </div>
    
    <div class="demo-area">
      <h3>🏗️ Real-World Examples</h3>
      
      <div class="comparison-grid">
        <div class="sass-code">
          <span class="comment">// Operators: Grid system</span><br>
          <span class="variable">$grid-columns</span>: <span class="value">12</span>;<br>
          <span class="variable">$gutter</span>: <span class="value">16px</span>;<br><br>
          
          <span class="keyword">@for</span> <span class="variable">$i</span> <span class="keyword">from</span> <span class="value">1</span> <span class="keyword">through</span> <span class="variable">$grid-columns</span> {<br>
          &nbsp;&nbsp;<span class="selector">.col-</span>#<span class="value">{</span><span class="variable">$i</span><span class="value">}</span> {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">width</span>: (<span class="value">100%</span> <span class="operator">/</span> <span class="variable">$grid-columns</span>) <span class="operator">*</span> <span class="variable">$i</span>;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">padding</span>: <span class="variable">$gutter</span> <span class="operator">/</span> <span class="value">2</span>;<br>
          &nbsp;&nbsp;}<br>
          }<br><br>
          
          <span class="comment">// Responsive conditionals</span><br>
          <span class="keyword">@if</span> <span class="variable">$screen-width</span> <span class="operator"><</span> <span class="value">768px</span> {<br>
          &nbsp;&nbsp;<span class="selector">.container</span> { <span class="property">padding</span>: <span class="variable">$gutter</span> <span class="operator">/</span> <span class="value">2</span>; }<br>
          }
        </div>
        
        <div class="sass-code">
          <span class="comment">// Functions: Design system</span><br>
          <span class="keyword">@function</span> <span class="function-name">modular-scale</span>(<span class="variable">$exponent</span>) {<br>
          &nbsp;&nbsp;<span class="variable">$base</span>: <span class="value">16px</span>;<br>
          &nbsp;&nbsp;<span class="variable">$ratio</span>: <span class="value">1.25</span>;<br>
          &nbsp;&nbsp;<span class="keyword">@return</span> <span class="variable">$base</span> <span class="operator">*</span> <span class="function-name">pow</span>(<span class="variable">$ratio</span>, <span class="variable">$exponent</span>);<br>
          }<br><br>
          
          <span class="keyword">@function</span> <span class="function-name">color-tint</span>(<span class="variable">$color</span>, <span class="variable">$percentage</span>) {<br>
          &nbsp;&nbsp;<span class="keyword">@return</span> <span class="value">mix(white, </span><span class="variable">$color</span>, <span class="variable">$percentage</span><span class="value">)</span>;<br>
          }<br><br>
          
          <span class="selector">.heading</span> {<br>
          &nbsp;&nbsp;<span class="property">font-size</span>: <span class="function-name">modular-scale</span>(<span class="value">3</span>);<br>
          &nbsp;&nbsp;<span class="property">color</span>: <span class="function-name">color-tint</span>(<span class="value">#3498db</span>, <span class="value">20%</span>);<br>
          }
        </div>
      </div>
    </div>
    
    <div class="decision-guide">
      <h3>🎯 Decision Guide</h3>
      <p><strong>Choose Operators when:</strong> You need simple arithmetic, direct value manipulations, 
      comparison operations, or one-time calculations that Don&apos;t need to be reused elsewhere.</p>
      
      <p><strong>Choose Functions when:</strong> You have complex calculations, need to reuse logic 
      multiple times, want to abstract complex operations, or need to perform color manipulations 
      and transformations.</p>
      
      <p><strong>Remember:</strong> Operators are for direct calculations, functions are for reusable 
      logic. Use operators for simplicity and functions for maintainability.</p>
    </div>
    
    <div class="comparison-section">
      <h2>🔗 Working Together</h2>
      <p>Operators and functions often work together in real projects:</p>
      
      <div class="sass-code">
        <span class="comment">// Function using operators internally</span><br>
        <span class="keyword">@function</span> <span class="function-name">responsive-size</span>(<span class="variable">$base</span>, <span class="variable">$multiplier</span>: <span class="value">1</span>) {<br>
        &nbsp;&nbsp;<span class="variable">$min-size</span>: <span class="variable">$base</span> <span class="operator">*</span> <span class="value">0.8</span>;<br>
        &nbsp;&nbsp;<span class="variable">$max-size</span>: <span class="variable">$base</span> <span class="operator">*</span> <span class="value">1.2</span> <span class="operator">*</span> <span class="variable">$multiplier</span>;<br>
        &nbsp;&nbsp;<span class="keyword">@return</span> <span class="value">clamp(</span>#<span class="value">{</span><span class="variable">$min-size</span><span class="value">}, </span>#<span class="value">{</span><span class="variable">$max-size</span><span class="value">} </span>#<span class="value">{</span><span class="variable">$base</span> <span class="operator">*</span> <span class="variable">$multiplier</span><span class="value">})</span>;<br>
        }<br><br>
        
        <span class="comment">// Using the function with operator-like syntax</span><br>
        <span class="selector">.element</span> {<br>
        &nbsp;&nbsp;<span class="property">font-size</span>: <span class="function-name">responsive-size</span>(<span class="value">16px</span>, <span class="value">1.5</span>);<br>
        &nbsp;&nbsp;<span class="property">padding</span>: <span class="function-name">responsive-size</span>(<span class="value">8px</span>) <span class="operator">*</span> <span class="value">2</span>;<br>
        }
      </div>
    </div>
  </div>
</body>
</html>

Practical Applications

🎨 Design Systems

Spacing scales and grids
Typography scaling systems
Color palette generation
Aspect ratio calculations
Responsive value computations

🔧 Layout Systems

Grid system calculations
Flexible spacing systems
Responsive breakpoint logic
Mathematical proportions
Dynamic sizing calculations

💡 Pro Tips for Effective Operators

Structure:

Use parentheses for division operations
Maintain consistent units in calculations
Pre-calculate complex values
Use variables for base values

Performance:

Avoid complex calculations in loops
Use functions for reusable logic
Cache expensive computations
Test edge cases thoroughly

Ready to Master Sass Operators? 🔢

Start using Sass operators to create dynamic, calculated values that make your stylesheets more flexible, maintainable, and mathematically precise.

< Previous Next >