Sass Functions 🔢
Create reusable calculations, dynamic values, and powerful utilities for your stylesheets.
What are Sass Functions?
Sass functions allow you to define reusable operations that return values. They enable dynamic calculations, color manipulation, unit conversions, and complex computations that make your stylesheets more powerful and maintainable.
🔢 Dynamic Calculations
Compute values based on parameters
🎨 Color Manipulation
Create color systems and variations
⚡ Reusable Logic
Write once, use everywhere
Basic Sass Functions
Core Concepts:
- @function: Define a reusable operation
- @return: Specify the output value
- Parameters: Pass values to functions
- Built-in Functions: Use Sass"s extensive function library
- Type Safety: Sass validates function arguments
Basic Functions Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Functions - Basic Functions & 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; }
.keyword { color: #e74c3c; font-weight: bold; }
.function-name { color: #9b59b6; }
.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);
}
/* Demo styles using function concepts */
.spacing-demo {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem 0;
}
.spacing-box {
background: #3498db;
color: white;
padding: 1rem;
border-radius: 5px;
text-align: center;
}
.color-demo {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem 0;
}
.color-box {
width: 100px;
height: 100px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.unit-demo {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem 0;
}
.unit-box {
background: #2ecc71;
color: white;
padding: 1rem;
border-radius: 5px;
text-align: center;
}
.math-demo {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem 0;
}
.math-box {
background: #e74c3c;
color: white;
padding: 1rem;
border-radius: 5px;
text-align: center;
}
.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 Functions</h1>
<p>Create reusable calculations and dynamic values</p>
</div>
<div class="comparison-grid">
<div class="code-panel">
<h3>🏗️ Basic Function Definition</h3>
<div class="sass-code">
<span class="comment">// Define a function</span><br>
<span class="keyword">@function</span> <span class="function-name">calculate-rem</span>(<span class="variable">$pixels</span>) {<br>
<span class="keyword">@return</span> (<span class="variable">$pixels</span> / <span class="value">16</span>) * <span class="value">1rem</span>;<br>
}<br><br>
<span class="keyword">@function</span> <span class="function-name">spacing</span>(<span class="variable">$multiplier</span>) {<br>
<span class="keyword">@return</span> <span class="variable">$multiplier</span> * <span class="value">0.5rem</span>;<br>
}<br><br>
<span class="keyword">@function</span> <span class="function-name">color-shade</span>(<span class="variable">$color</span>, <span class="variable">$percent</span>) {<br>
<span class="keyword">@return</span> <span class="value">darken(</span><span class="variable">$color</span>, <span class="variable">$percent</span><span class="value">)</span>;<br>
}<br><br>
<span class="comment">// Using functions</span><br>
<span class="selector">.text-large</span> {<br>
<span class="property">font-size</span>: <span class="function-name">calculate-rem</span>(<span class="value">24</span>);<br>
}<br><br>
<span class="selector">.container</span> {<br>
<span class="property">padding</span>: <span class="function-name">spacing</span>(<span class="value">2</span>);<br>
<span class="property">margin-bottom</span>: <span class="function-name">spacing</span>(<span class="value">4</span>);<br>
}<br><br>
<span class="selector">.btn-primary</span> {<br>
<span class="property">background</span>: <span class="value">#3498db</span>;<br>
<span class="property">border-color</span>: <span class="function-name">color-shade</span>(<span class="value">#3498db</span>, <span class="value">20%</span>);<br>
}
</div>
</div>
<div class="code-panel">
<h3>📄 Compiled CSS</h3>
<div class="css-code">
<span class="selector">.text-large</span> {<br>
<span class="property">font-size</span>: <span class="value">1.5rem</span>;<br>
}<br><br>
<span class="selector">.container</span> {<br>
<span class="property">padding</span>: <span class="value">1rem</span>;<br>
<span class="property">margin-bottom</span>: <span class="value">2rem</span>;<br>
}<br><br>
<span class="selector">.btn-primary</span> {<br>
<span class="property">background</span>: <span class="value">#3498db</span>;<br>
<span class="property">border-color</span>: <span class="value">#21618c</span>;<br>
}
</div>
</div>
</div>
<div class="comparison-grid">
<div class="code-panel">
<h3>🎯 Built-in Sass Functions</h3>
<div class="sass-code">
<span class="comment">// Color functions</span><br>
<span class="variable">$primary-color</span>: <span class="value">#3498db</span>;<br><br>
<span class="selector">.element</span> {<br>
<span class="property">background</span>: <span class="value">lighten(</span><span class="variable">$primary-color</span>, <span class="value">20%</span><span class="value">)</span>;<br>
<span class="property">color</span>: <span class="value">darken(</span><span class="variable">$primary-color</span>, <span class="value">30%</span><span class="value">)</span>;<br>
<span class="property">border</span>: <span class="value">1px solid rgba(</span><span class="variable">$primary-color</span>, <span class="value">0.5</span><span class="value">)</span>;<br>
}<br><br>
<span class="comment">// String functions</span><br>
<span class="variable">$font-family</span>: <span class="value">"Inter"</span>;<br>
<span class="selector">.heading</span> {<br>
<span class="property">font-family</span>: <span class="value">unquote(</span><span class="variable">$font-family</span> + <span class="value">", sans-serif"</span><span class="value">)</span>;<br>
}<br><br>
<span class="comment">// Number functions</span><br>
<span class="selector">.math-example</span> {<br>
<span class="property">width</span>: <span class="value">percentage(</span><span class="value">2</span> / <span class="value">3</span><span class="value">)</span>;<br>
<span class="property">height</span>: <span class="value">round(</span><span class="value">4.7</span><span class="value">px</span><span class="value">)</span>;<br>
<span class="property">opacity</span>: <span class="value">random()</span>;<br>
}<br><br>
<span class="comment">// List functions</span><br>
<span class="variable">$colors</span>: <span class="value">red, blue, green</span>;<br>
<span class="selector">.first-color</span> {<br>
<span class="property">color</span>: <span class="value">nth(</span><span class="variable">$colors</span>, <span class="value">1</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>
<span class="property">background</span>: <span class="value">#85c1e9</span>;<br>
<span class="property">color</span>: <span class="value">#1b4f72</span>;<br>
<span class="property">border</span>: <span class="value">1px solid rgba(52, 152, 219, 0.5)</span>;<br>
}<br><br>
<span class="selector">.heading</span> {<br>
<span class="property">font-family</span>: <span class="value">Inter, sans-serif</span>;<br>
}<br><br>
<span class="selector">.math-example</span> {<br>
<span class="property">width</span>: <span class="value">66.66667%</span>;<br>
<span class="property">height</span>: <span class="value">5px</span>;<br>
<span class="property">opacity</span>: <span class="value">0.52345</span>;<br>
}<br><br>
<span class="selector">.first-color</span> {<br>
<span class="property">color</span>: <span class="value">red</span>;<br>
}
</div>
</div>
</div>
<div class="demo-area">
<h3>🚀 Live Demo - Functions in Action</h3>
<h4>Spacing Function Demo</h4>
<div class="spacing-demo">
<div class="spacing-box" style="padding: 0.5rem;">Spacing 1 (0.5rem)</div>
<div class="spacing-box" style="padding: 1rem;">Spacing 2 (1rem)</div>
<div class="spacing-box" style="padding: 1.5rem;">Spacing 3 (1.5rem)</div>
<div class="spacing-box" style="padding: 2rem;">Spacing 4 (2rem)</div>
</div>
<h4>Color Function Demo</h4>
<div class="color-demo">
<div class="color-box" style="background: #85c1e9;">Lighten 20%</div>
<div class="color-box" style="background: #3498db;">Base Color</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>
<h4>Unit Conversion Demo</h4>
<div class="unit-demo">
<div class="unit-box" style="font-size: 0.75rem;">12px → 0.75rem</div>
<div class="unit-box" style="font-size: 1rem;">16px → 1rem</div>
<div class="unit-box" style="font-size: 1.25rem;">20px → 1.25rem</div>
<div class="unit-box" style="font-size: 1.5rem;">24px → 1.5rem</div>
</div>
<h4>Math Function Demo</h4>
<div class="math-demo">
<div class="math-box" style="width: 33.33333%;">33.33% Width</div>
<div class="math-box" style="width: 66.66667%;">66.67% Width</div>
<div class="math-box" style="width: 50%;">50% Width</div>
</div>
</div>
<div class="card">
<h3>💡 Why Use Functions?</h3>
<ul>
<li><strong>Dynamic Calculations:</strong> Compute values based on parameters</li>
<li><strong>Consistent Values:</strong> Maintain mathematical relationships</li>
<li><strong>Reusable Logic:</strong> Write once, use everywhere</li>
<li><strong>Type Safety:</strong> Sass validates function arguments</li>
<li><strong>Complex Operations:</strong> Handle advanced calculations</li>
<li><strong>Maintainability:</strong> Update logic in one place</li>
</ul>
</div>
</div>
</body>
</html>Advanced Function Techniques
Color Systems
Create dynamic color palettes and theme systems with functions.
@function get-color($name, $variant) {
@return map-get($colors, $name);
}
Typography Scales
Generate consistent typography systems with modular scales.
@function modular-scale($exponent) {
@return $base * pow($ratio, $exponent);
}
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 Functions - Advanced Techniques & Real-World Examples</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; }
.keyword { color: #e74c3c; font-weight: bold; }
.function-name { color: #9b59b6; }
.property { color: #3498db; }
.value { color: #2ecc71; }
.variable { color: #f39c12; }
.demo-section {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
}
/* Demo styles for advanced functions */
.color-system {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.color-level {
padding: 1rem;
border-radius: 5px;
text-align: center;
color: white;
font-weight: bold;
}
.typography-scale {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0;
}
.typography-item {
padding: 0.5rem;
background: white;
border-radius: 4px;
}
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.grid-item {
background: white;
padding: 1rem;
border-radius: 8px;
text-align: center;
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 Functions</h1>
<p>Complex Calculations, Color Systems, and Design Utilities</p>
</div>
<!-- Color System Functions -->
<div class="feature-card">
<h3>🎨 Color System Functions</h3>
<div class="code-comparison">
<div class="sass-code">
<span class="comment">// Color palette generator</span><br>
<span class="keyword">@function</span> <span class="function-name">generate-palette</span>(<span class="variable">$base-color</span>, <span class="variable">$steps</span>: <span class="value">5</span>) {<br>
<span class="variable">$palette</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">$steps</span> {<br>
<span class="variable">$lightness</span>: (<span class="variable">$i</span> - <span class="value">1</span>) * (<span class="value">100%</span> / (<span class="variable">$steps</span> - <span class="value">1</span>));<br>
<span class="variable">$color</span>: <span class="value">adjust-color(</span><span class="variable">$base-color</span>, <span class="property">$lightness</span>: <span class="variable">$lightness</span> - <span class="value">50%</span><span class="value">)</span>;<br>
<span class="variable">$palette</span>: <span class="value">map-merge(</span><span class="variable">$palette</span>, (<span class="variable">$i</span>: <span class="variable">$color</span>)<span class="value">)</span>;<br>
}<br>
<span class="keyword">@return</span> <span class="variable">$palette</span>;<br>
}<br><br>
<span class="keyword">@function</span> <span class="function-name">get-color</span>(<span class="variable">$name</span>, <span class="variable">$variant</span>: <span class="value">base</span>) {<br>
<span class="variable">$colors</span>: (<br>
<span class="value">primary</span>: <span class="function-name">generate-palette</span>(<span class="value">#3498db</span>),<br>
<span class="value">secondary</span>: <span class="function-name">generate-palette</span>(<span class="value">#2ecc71</span>),<br>
<span class="value">accent</span>: <span class="function-name">generate-palette</span>(<span class="value">#e74c3c</span>)<br>
);<br><br>
<span class="variable">$color-map</span>: <span class="value">map-get(</span><span class="variable">$colors</span>, <span class="variable">$name</span><span class="value">)</span>;<br>
<span class="variable">$variants</span>: (<br>
<span class="value">lightest</span>: <span class="value">1</span>,<br>
<span class="value">light</span>: <span class="value">2</span>,<br>
<span class="value">base</span>: <span class="value">3</span>,<br>
<span class="value">dark</span>: <span class="value">4</span>,<br>
<span class="value">darkest</span>: <span class="value">5</span><br>
);<br><br>
<span class="keyword">@return</span> <span class="value">map-get(</span><span class="variable">$color-map</span>, <span class="value">map-get(</span><span class="variable">$variants</span>, <span class="variable">$variant</span><span class="value">))</span>;<br>
}<br><br>
<span class="comment">// Usage</span><br>
<span class="selector">.btn-primary</span> {<br>
<span class="property">background</span>: <span class="function-name">get-color</span>(<span class="value">primary</span>);<br>
<span class="property">border-color</span>: <span class="function-name">get-color</span>(<span class="value">primary</span>, <span class="value">dark</span>);<br>
}<br><br>
<span class="selector">.btn-primary:hover</span> {<br>
<span class="property">background</span>: <span class="function-name">get-color</span>(<span class="value">primary</span>, <span class="value">light</span>);<br>
}
</div>
<div class="css-code">
<span class="selector">.btn-primary</span> {<br>
<span class="property">background</span>: <span class="value">#3498db</span>;<br>
<span class="property">border-color</span>: <span class="value">#21618c</span>;<br>
}<br><br>
<span class="selector">.btn-primary:hover</span> {<br>
<span class="property">background</span>: <span class="value">#5dade2</span>;<br>
}
</div>
</div>
<div class="demo-section">
<h4>Color System Demo</h4>
<div class="color-system">
<div class="color-level" style="background: #aed6f1;">Lightest</div>
<div class="color-level" style="background: #85c1e9;">Light</div>
<div class="color-level" style="background: #3498db;">Base</div>
<div class="color-level" style="background: #21618c;">Dark</div>
<div class="color-level" style="background: #1b4f72;">Darkest</div>
</div>
</div>
</div>
<!-- Typography Scale Functions -->
<div class="feature-card">
<h3>📐 Typography Scale Functions</h3>
<div class="code-comparison">
<div class="sass-code">
<span class="comment">// Modular scale function</span><br>
<span class="keyword">@function</span> <span class="function-name">modular-scale</span>(<span class="variable">$exponent</span>, <span class="variable">$base</span>: <span class="value">1rem</span>, <span class="variable">$ratio</span>: <span class="value">1.25</span>) {<br>
<span class="keyword">@return</span> <span class="variable">$base</span> * <span class="value">pow(</span><span class="variable">$ratio</span>, <span class="variable">$exponent</span><span class="value">)</span>;<br>
}<br><br>
<span class="keyword">@function</span> <span class="function-name">get-font-size</span>(<span class="variable">$level</span>) {<br>
<span class="variable">$sizes</span>: (<br>
<span class="value">xs</span>: <span class="function-name">modular-scale</span>(<span class="value">-2</span>),<br>
<span class="value">sm</span>: <span class="function-name">modular-scale</span>(<span class="value">-1</span>),<br>
<span class="value">base</span>: <span class="function-name">modular-scale</span>(<span class="value">0</span>),<br>
<span class="value">lg</span>: <span class="function-name">modular-scale</span>(<span class="value">1</span>),<br>
<span class="value">xl</span>: <span class="function-name">modular-scale</span>(<span class="value">2</span>),<br>
<span class="value">2xl</span>: <span class="function-name">modular-scale</span>(<span class="value">3</span>),<br>
<span class="value">3xl</span>: <span class="function-name">modular-scale</span>(<span class="value">4</span>)<br>
);<br><br>
<span class="keyword">@return</span> <span class="value">map-get(</span><span class="variable">$sizes</span>, <span class="variable">$level</span><span class="value">)</span>;<br>
}<br><br>
<span class="comment">// Usage</span><br>
<span class="selector">.text-xs</span> {<br>
<span class="property">font-size</span>: <span class="function-name">get-font-size</span>(<span class="value">xs</span>);<br>
}<br><br>
<span class="selector">.text-base</span> {<br>
<span class="property">font-size</span>: <span class="function-name">get-font-size</span>(<span class="value">base</span>);<br>
}<br><br>
<span class="selector">.text-xl</span> {<br>
<span class="property">font-size</span>: <span class="function-name">get-font-size</span>(<span class="value">xl</span>);<br>
}<br><br>
<span class="selector">.heading</span> {<br>
<span class="property">font-size</span>: <span class="function-name">get-font-size</span>(<span class="value">3xl</span>);<br>
<span class="property">line-height</span>: <span class="value">1.2</span>;<br>
}
</div>
<div class="css-code">
<span class="selector">.text-xs</span> {<br>
<span class="property">font-size</span>: <span class="value">0.64rem</span>;<br>
}<br><br>
<span class="selector">.text-base</span> {<br>
<span class="property">font-size</span>: <span class="value">1rem</span>;<br>
}<br><br>
<span class="selector">.text-xl</span> {<br>
<span class="property">font-size</span>: <span class="value">1.5625rem</span>;<br>
}<br><br>
<span class="selector">.heading</span> {<br>
<span class="property">font-size</span>: <span class="value">2.44141rem</span>;<br>
<span class="property">line-height</span>: <span class="value">1.2</span>;<br>
}
</div>
</div>
<div class="demo-section">
<h4>Typography Scale Demo</h4>
<div class="typography-scale">
<div class="typography-item" style="font-size: 0.64rem;">Extra Small (0.64rem)</div>
<div class="typography-item" style="font-size: 0.8rem;">Small (0.8rem)</div>
<div class="typography-item" style="font-size: 1rem;">Base (1rem)</div>
<div class="typography-item" style="font-size: 1.25rem;">Large (1.25rem)</div>
<div class="typography-item" style="font-size: 1.5625rem;">Extra Large (1.56rem)</div>
<div class="typography-item" style="font-size: 1.95313rem;">2X Large (1.95rem)</div>
<div class="typography-item" style="font-size: 2.44141rem;">3X Large (2.44rem)</div>
</div>
</div>
</div>
<!-- Responsive Design Functions -->
<div class="feature-card">
<h3>📱 Responsive Design Functions</h3>
<div class="code-comparison">
<div class="sass-code">
<span class="comment">// Breakpoint function</span><br>
<span class="keyword">@function</span> <span class="function-name">breakpoint</span>(<span class="variable">$name</span>) {<br>
<span class="variable">$breakpoints</span>: (<br>
<span class="value">xs</span>: <span class="value">320px</span>,<br>
<span class="value">sm</span>: <span class="value">576px</span>,<br>
<span class="value">md</span>: <span class="value">768px</span>,<br>
<span class="value">lg</span>: <span class="value">992px</span>,<br>
<span class="value">xl</span>: <span class="value">1200px</span>,<br>
<span class="value">2xl</span>: <span class="value">1400px</span><br>
);<br><br>
<span class="keyword">@return</span> <span class="value">map-get(</span><span class="variable">$breakpoints</span>, <span class="variable">$name</span><span class="value">)</span>;<br>
}<br><br>
<span class="keyword">@function</span> <span class="function-name">fluid-value</span>(<span class="variable">$min-size</span>, <span class="variable">$max-size</span>, <span class="variable">$min-width</span>: <span class="value">320px</span>, <span class="variable">$max-width</span>: <span class="value">1200px</span>) {<br>
<span class="variable">$slope</span>: (<span class="variable">$max-size</span> - <span class="variable">$min-size</span>) / (<span class="variable">$max-width</span> - <span class="variable">$min-width</span>);<br>
<span class="variable">$base</span>: <span class="variable">$min-size</span> - <span class="variable">$slope</span> * <span class="variable">$min-width</span>;<br><br>
<span class="keyword">@return</span> <span class="value">calc(</span>#<span class="value">{</span><span class="variable">$base</span><span class="value">} + </span>#<span class="value">{</span><span class="variable">$slope</span><span class="value">} * 100vw)</span>;<br>
}<br><br>
<span class="comment">// Usage</span><br>
<span class="selector">.responsive-heading</span> {<br>
<span class="property">font-size</span>: <span class="function-name">fluid-value</span>(<span class="value">1.5rem</span>, <span class="value">3rem</span>);<br>
}<br><br>
<span class="selector">.container</span> {<br>
<span class="property">max-width</span>: <span class="function-name">breakpoint</span>(<span class="value">xl</span>);<br>
<span class="property">margin</span>: <span class="value">0 auto</span>;<br>
}
</div>
<div class="css-code">
<span class="selector">.responsive-heading</span> {<br>
<span class="property">font-size</span>: <span class="value">calc(1.06818rem + 1.70455vw)</span>;<br>
}<br><br>
<span class="selector">.container</span> {<br>
<span class="property">max-width</span>: <span class="value">1200px</span>;<br>
<span class="property">margin</span>: <span class="value">0 auto</span>;<br>
}
</div>
</div>
<div class="demo-section">
<h4>Responsive Grid Demo</h4>
<div class="responsive-grid">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
<div class="grid-item">Grid Item 4</div>
</div>
<p style="text-align: center; margin-top: 1rem; font-size: 0.9rem;">
Resize your browser to see responsive behavior
</p>
</div>
</div>
</div>
</body>
</html>Functions Best Practices
Single Responsibility Principle
Each function should have a single, focused purpose. Avoid creating "god functions" that try to do too many things at once.
// Good: Focused functions
@function calculate-rem($pixels) { ... }
@function color-shade($color, $percent) { ... }
@function get-spacing($multiplier) { ... }
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 Functions - 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 Functions Best Practices</h1>
<p>Write efficient, maintainable functions for scalable projects</p>
</div>
<div class="practices-grid">
<div class="practice-card">
<h3>📏 Single Responsibility Principle</h3>
<p>Each function should do one thing well:</p>
<div class="do-dont">
<div class="do">
<strong>✅ Focused Functions</strong>
<div class="good-example">
@function calculate-rem($pixels) {<br>
@return ($pixels / 16) * 1rem;<br>
}<br><br>
@function color-shade($color, $percent) {<br>
@return darken($color, $percent);<br>
}
</div>
</div>
<div class="dont">
<strong>❌ Overloaded Functions</strong>
<div class="bad-example">
@function do-everything($a, $b, $c) {<br>
// Calculates rem, adjusts colors,<br>
// handles spacing, and more...<br>
// Too many responsibilities!<br>
}
</div>
</div>
</div>
</div>
<div class="practice-card">
<h3>🎯 Meaningful Naming</h3>
<p>Use descriptive names that indicate purpose:</p>
<div class="do-dont">
<div class="do">
<strong>✅ Clear Names</strong>
<div class="good-example">
@function calculate-rem<br>
@function generate-color-palette<br>
@function get-spacing<br>
@function fluid-value<br>
@function modular-scale
</div>
</div>
<div class="dont">
<strong>❌ Vague Names</strong>
<div class="bad-example">
@function func1<br>
@function my-function<br>
@function temp<br>
@function test<br>
@function calculate
</div>
</div>
</div>
</div>
<div class="practice-card">
<h3>⚡ Performance Considerations</h3>
<p>Optimize functions for better performance:</p>
<div class="performance-tips">
<strong>💡 Performance Tips:</strong>
<ul>
<li>Avoid complex calculations in frequently used functions</li>
<li>Cache expensive computations when possible</li>
<li>Use built-in Sass functions when available</li>
<li>Limit deep recursion in functions</li>
</ul>
</div>
<div class="do-dont">
<div class="do">
<strong>✅ Efficient</strong>
<div class="good-example">
@function fast-function($value) {<br>
@return $value * 1px;<br>
}
</div>
</div>
<div class="dont">
<strong>❌ Heavy</strong>
<div class="bad-example">
@function slow-function($value) {<br>
// Complex nested loops<br>
// Heavy calculations<br>
// Multiple map lookups<br>
// Too complex!<br>
}
</div>
</div>
</div>
</div>
<div class="practice-card">
<h3>🔧 Parameter Best Practices</h3>
<p>Use parameters effectively:</p>
<div class="do-dont">
<div class="do">
<strong>✅ Good Parameters</strong>
<div class="good-example">
@function create-shadow(<br>
$x: 0,<br>
$y: 2px,<br>
$blur: 4px,<br>
$color: rgba(0,0,0,0.1)<br>
) { ... }
</div>
</div>
<div class="dont">
<strong>❌ Poor Parameters</strong>
<div class="bad-example">
@function confusing-function(<br>
$a, $b, $c, $d, $e,<br>
$f: null, $g: false<br>
) { ... }
</div>
</div>
</div>
</div>
</div>
<div class="practice-card">
<h3>🏗️ Common Function Patterns</h3>
<div class="pattern-grid">
<div class="pattern-card">
<h4>Utility Functions</h4>
<div class="good-example">
@function strip-unit($value) {<br>
@return $value / ($value * 0 + 1);<br>
}<br><br>
@function em($pixels, $context: 16px) {<br>
@return ($pixels / $context) * 1em;<br>
}
</div>
</div>
<div class="pattern-card">
<h4>Color Functions</h4>
<div class="good-example">
@function tint($color, $percent) {<br>
@return mix(white, $color, $percent);<br>
}<br><br>
@function shade($color, $percent) {<br>
@return mix(black, $color, $percent);<br>
}
</div>
</div>
<div class="pattern-card">
<h4>Math Functions</h4>
<div class="good-example">
@function pow($number, $exponent) {<br>
$value: 1;<br>
@for $i from 1 through $exponent {<br>
$value: $value * $number;<br>
}<br>
@return $value;<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>Identify Patterns</h4>
<p>Look for repeated calculations in your stylesheets</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h4>Create Functions</h4>
<p>Extract calculations into focused functions</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h4>Test Thoroughly</h4>
<p>Ensure functions work with different inputs</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h4>Document</h4>
<p>Add comments explaining usage and parameters</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>Keep functions focused and single-purpose</li>
<li>Use descriptive, meaningful names</li>
<li>Provide sensible default values</li>
<li>Document complex functions</li>
<li>Test functions with edge cases</li>
</ul>
</div>
<div class="dont">
<strong>❌ Avoid These:</strong>
<ul>
<li>Creating overly complex functions</li>
<li>Using vague or confusing names</li>
<li>Mixing unrelated functionality</li>
<li>Forgetting to handle edge cases</li>
<li>Creating functions for one-time use</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>Functions vs Mixins
🔢 Functions
Return values, calculations
🔄 Mixins
Output CSS blocks, reusable styles
🤝 Together
Powerful combination for complex systems
Functions vs Mixins Comparison
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Functions vs Mixins - 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; }
.keyword { color: #e74c3c; font-weight: bold; }
.function-name { color: #9b59b6; }
.mixin-name { color: #2ecc71; }
.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 Functions vs Mixins</h1>
<p>Understanding when to use functions and when to use mixins</p>
</div>
<div class="comparison-section">
<h2>📊 Fundamental Differences</h2>
<div class="comparison-grid">
<div class="sass-code">
<span class="comment">// Functions - Return values</span><br>
<span class="keyword">@function</span> <span class="function-name">calculate-rem</span>(<span class="variable">$pixels</span>) {<br>
<span class="keyword">@return</span> (<span class="variable">$pixels</span> / <span class="value">16</span>) * <span class="value">1rem</span>;<br>
}<br><br>
<span class="keyword">@function</span> <span class="function-name">color-shade</span>(<span class="variable">$color</span>, <span class="variable">$percent</span>) {<br>
<span class="keyword">@return</span> <span class="value">darken(</span><span class="variable">$color</span>, <span class="variable">$percent</span><span class="value">)</span>;<br>
}<br><br>
<span class="comment">// Usage: Returns values for properties</span><br>
<span class="selector">.text</span> {<br>
<span class="property">font-size</span>: <span class="function-name">calculate-rem</span>(<span class="value">18</span>);<br>
<span class="property">color</span>: <span class="function-name">color-shade</span>(<span class="value">#3498db</span>, <span class="value">20%</span>);<br>
}
</div>
<div class="sass-code">
<span class="comment">// Mixins - Output CSS blocks</span><br>
<span class="keyword">@mixin</span> <span class="mixin-name">button-style</span>(<span class="variable">$color</span>) {<br>
<span class="property">background</span>: <span class="variable">$color</span>;<br>
<span class="property">color</span>: <span class="value">white</span>;<br>
<span class="property">padding</span>: <span class="value">1rem 2rem</span>;<br>
<span class="property">border-radius</span>: <span class="value">5px</span>;<br>
<span class="property">border</span>: <span class="value">none</span>;<br>
}<br><br>
<span class="comment">// Usage: Outputs CSS properties</span><br>
<span class="selector">.btn</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">button-style</span>(<span class="value">#3498db</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 Functions For:</h4>
<ul>
<li>Calculating values</li>
<li>Color manipulation</li>
<li>Unit conversions</li>
<li>Mathematical operations</li>
<li>Returning single values</li>
<li>Data transformation</li>
<li>When you need a computed result</li>
</ul>
</div>
<div class="use-case">
<h4>✅ Use Mixins For:</h4>
<ul>
<li>Outputting multiple CSS properties</li>
<li>Reusable style blocks</li>
<li>Media queries and responsive design</li>
<li>Component base styles</li>
<li>Vendor prefixing</li>
<li>Complex selector patterns</li>
<li>When you need @content blocks</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>Functions</h3>
<p>Value computation and transformation</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🔄</div>
<h3>Mixins</h3>
<p>Code reusability and DRY principles</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🎯</div>
<h3>Functions</h3>
<p>Return single values for properties</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">📦</div>
<h3>Mixins</h3>
<p>Output complete style blocks</p>
</div>
</div>
</div>
<div class="demo-area">
<h3>🏗️ Real-World Examples</h3>
<div class="comparison-grid">
<div class="sass-code">
<span class="comment">// Function Example: Color System</span><br>
<span class="keyword">@function</span> <span class="function-name">get-color</span>(<span class="variable">$name</span>, <span class="variable">$variant</span>: <span class="value">base</span>) {<br>
<span class="variable">$colors</span>: (<br>
<span class="value">primary</span>: (<br>
<span class="value">light</span>: <span class="value">#3498db</span>,<br>
<span class="value">base</span>: <span class="value">#2980b9</span>,<br>
<span class="value">dark</span>: <span class="value">#1c6ea4</span><br>
)<br>
);<br><br>
<span class="keyword">@return</span> <span class="value">map-get(map-get(</span><span class="variable">$colors</span>, <span class="variable">$name</span><span class="value">), </span><span class="variable">$variant</span><span class="value">)</span>;<br>
}<br><br>
<span class="comment">// Usage</span><br>
<span class="selector">.btn-primary</span> {<br>
<span class="property">background</span>: <span class="function-name">get-color</span>(<span class="value">primary</span>);<br>
<span class="property">border-color</span>: <span class="function-name">get-color</span>(<span class="value">primary</span>, <span class="value">dark</span>);<br>
}
</div>
<div class="sass-code">
<span class="comment">// Mixin Example: Responsive Grid</span><br>
<span class="keyword">@mixin</span> <span class="mixin-name">grid-system</span>(<span class="variable">$columns</span>, <span class="variable">$gap</span>: <span class="value">1rem</span>) {<br>
<span class="property">display</span>: <span class="value">grid</span>;<br>
<span class="property">grid-template-columns</span>: <span class="value">repeat(</span><span class="variable">$columns</span>, <span class="value">1fr)</span>;<br>
<span class="property">gap</span>: <span class="variable">$gap</span>;<br><br>
<span class="keyword">@include</span> <span class="mixin-name">media-query</span>(<span class="value">tablet</span>) {<br>
<span class="property">grid-template-columns</span>: <span class="value">repeat(2, 1fr)</span>;<br>
}<br><br>
<span class="keyword">@include</span> <span class="mixin-name">media-query</span>(<span class="value">mobile</span>) {<br>
<span class="property">grid-template-columns</span>: <span class="value">1fr</span>;<br>
}<br>
}
</div>
</div>
</div>
<div class="decision-guide">
<h3>🎯 Decision Guide</h3>
<p><strong>Choose Functions when:</strong> You need to calculate values, transform data,
work with colors, convert units, or return computed results for CSS properties.</p>
<p><strong>Choose Mixins when:</strong> You need to output multiple CSS properties,
create reusable style blocks, handle media queries, or work with complex selector patterns.</p>
<p><strong>Remember:</strong> Functions return values, mixins output CSS. Use functions for
value computations and mixins for style patterns.</p>
</div>
<div class="comparison-section">
<h2>🔗 Working Together</h2>
<p>Functions and mixins often work together in real projects:</p>
<div class="sass-code">
<span class="comment">// Function for value calculation</span><br>
<span class="keyword">@function</span> <span class="function-name">spacing</span>(<span class="variable">$multiplier</span>) {<br>
<span class="keyword">@return</span> <span class="variable">$multiplier</span> * <span class="value">0.5rem</span>;<br>
}<br><br>
<span class="comment">// Mixin using the function</span><br>
<span class="keyword">@mixin</span> <span class="mixin-name">card-layout</span> {<br>
<span class="property">padding</span>: <span class="function-name">spacing</span>(<span class="value">3</span>);<br>
<span class="property">margin-bottom</span>: <span class="function-name">spacing</span>(<span class="value">2</span>);<br>
<span class="property">border-radius</span>: <span class="function-name">spacing</span>(<span class="value">1</span>);<br>
}<br><br>
<span class="selector">.card</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">card-layout</span>;<br>
<span class="property">background</span>: <span class="function-name">color-shade</span>(<span class="value">white</span>, <span class="value">5%</span>);<br>
}
</div>
</div>
</div>
</body>
</html>Practical Applications
🎨 Design Systems
- Color palette generation
- Typography scale systems
- Spacing and layout utilities
- Responsive value calculations
- Theme switching logic
🔧 Utility Systems
- Unit conversion functions
- Mathematical operations
- Color manipulation utilities
- String processing functions
- List and map operations
💡 Pro Tips for Effective Functions
Structure:
- Keep functions focused and single-purpose
- Use descriptive, meaningful names
- Provide sensible default values
- Document complex functions with comments
Usage:
- Use for repeated calculations
- Combine with mixins for complex systems
- Create function libraries for teams
- Test functions with edge cases
Ready to Master Sass Functions? 🔢
Start using Sass functions to create dynamic, calculated values that make your stylesheets more powerful, maintainable, and consistent.