Sass Mixins 🔄
Create reusable code blocks, eliminate repetition, and maintain consistent styling across your project.
What are Sass Mixins?
Sass mixins allow you to define reusable blocks of CSS that can be included anywhere in your stylesheets. They help you write DRY (Don't Repeat Yourself) code and maintain consistency across your project.
🔄 Code Reusability
Write once, use everywhere
🎯 Consistency
Maintain uniform styling
⚡ Efficiency
Reduce code duplication
Basic Sass Mixins
Core Concepts:
- @mixin: Define a reusable code block
- @include: Use a mixin in your styles
- Parameters: Pass values to mixins
- Default Values: Set fallback values for parameters
- Content Blocks: Pass custom content to mixins
Basic Mixins Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Mixins - Basic Mixins & Reusable Code</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; }
.mixin-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 mixin concepts */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.card {
background: white;
border-radius: 10px;
padding: 2rem;
margin: 1rem;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-left: 4px solid #3498db;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
margin: 0.5rem;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background: #3498db;
color: white;
}
.btn-primary:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-secondary {
background: #2ecc71;
color: white;
}
.btn-secondary:hover {
background: #27ae60;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.text-center { text-align: center; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-bold { font-weight: bold; }
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.shadow-lg { box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.border-radius-sm { border-radius: 4px; }
.border-radius-md { border-radius: 8px; }
.border-radius-lg { border-radius: 12px; }
@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 Mixins</h1>
<p>Create reusable code blocks and avoid repetition</p>
</div>
<div class="comparison-grid">
<div class="code-panel">
<h3>🏗️ Basic Mixin Definition</h3>
<div class="sass-code">
<span class="comment">// Define a mixin</span><br>
<span class="keyword">@mixin</span> <span class="mixin-name">flex-center</span> {<br>
<span class="property">display</span>: <span class="value">flex</span>;<br>
<span class="property">justify-content</span>: <span class="value">center</span>;<br>
<span class="property">align-items</span>: <span class="value">center</span>;<br>
}<br><br>
<span class="keyword">@mixin</span> <span class="mixin-name">button-style</span> {<br>
<span class="property">display</span>: <span class="value">inline-block</span>;<br>
<span class="property">padding</span>: <span class="value">1rem 2rem</span>;<br>
<span class="property">border</span>: <span class="value">none</span>;<br>
<span class="property">border-radius</span>: <span class="value">5px</span>;<br>
<span class="property">font-size</span>: <span class="value">1rem</span>;<br>
<span class="property">cursor</span>: <span class="value">pointer</span>;<br>
<span class="property">transition</span>: <span class="value">all 0.3s ease</span>;<br>
}<br><br>
<span class="comment">// Use mixins with @include</span><br>
<span class="selector">.container</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">flex-center</span>;<br>
<span class="property">min-height</span>: <span class="value">100vh</span>;<br>
}<br><br>
<span class="selector">.btn</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">button-style</span>;<br>
}<br><br>
<span class="selector">.btn-primary</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">button-style</span>;<br>
<span class="property">background</span>: <span class="value">#3498db</span>;<br>
<span class="property">color</span>: <span class="value">white</span>;<br>
}<br>
</div>
</div>
<div class="code-panel">
<h3>📄 Compiled CSS</h3>
<div class="css-code">
<span class="selector">.container</span> {<br>
<span class="property">display</span>: <span class="value">flex</span>;<br>
<span class="property">justify-content</span>: <span class="value">center</span>;<br>
<span class="property">align-items</span>: <span class="value">center</span>;<br>
<span class="property">min-height</span>: <span class="value">100vh</span>;<br>
}<br><br>
<span class="selector">.btn</span> {<br>
<span class="property">display</span>: <span class="value">inline-block</span>;<br>
<span class="property">padding</span>: <span class="value">1rem 2rem</span>;<br>
<span class="property">border</span>: <span class="value">none</span>;<br>
<span class="property">border-radius</span>: <span class="value">5px</span>;<br>
<span class="property">font-size</span>: <span class="value">1rem</span>;<br>
<span class="property">cursor</span>: <span class="value">pointer</span>;<br>
<span class="property">transition</span>: <span class="value">all 0.3s ease</span>;<br>
}<br><br>
<span class="selector">.btn-primary</span> {<br>
<span class="property">display</span>: <span class="value">inline-block</span>;<br>
<span class="property">padding</span>: <span class="value">1rem 2rem</span>;<br>
<span class="property">border</span>: <span class="value">none</span>;<br>
<span class="property">border-radius</span>: <span class="value">5px</span>;<br>
<span class="property">font-size</span>: <span class="value">1rem</span>;<br>
<span class="property">cursor</span>: <span class="value">pointer</span>;<br>
<span class="property">transition</span>: <span class="value">all 0.3s ease</span>;<br>
<span class="property">background</span>: <span class="value">#3498db</span>;<br>
<span class="property">color</span>: <span class="value">white</span>;<br>
}
</div>
</div>
</div>
<div class="comparison-grid">
<div class="code-panel">
<h3>🎯 Mixins with Parameters</h3>
<div class="sass-code">
<span class="comment">// Mixin with parameters</span><br>
<span class="keyword">@mixin</span> <span class="mixin-name">button-theme</span>(<span class="variable">$bg-color</span>, <span class="variable">$text-color</span>: <span class="value">white</span>) {<br>
<span class="property">background-color</span>: <span class="variable">$bg-color</span>;<br>
<span class="property">color</span>: <span class="variable">$text-color</span>;<br>
<span class="property">border</span>: <span class="value">2px solid darken(</span><span class="variable">$bg-color</span>, <span class="value">10%</span><span class="value">)</span>;<br><br>
<span class="selector">&:hover</span> {<br>
<span class="property">background-color</span>: <span class="value">darken(</span><span class="variable">$bg-color</span>, <span class="value">10%</span><span class="value">)</span>;<br>
<span class="property">transform</span>: <span class="value">translateY(-2px)</span>;<br>
}<br>
}<br><br>
<span class="keyword">@mixin</span> <span class="mixin-name">box-shadow</span>(<span class="variable">$level</span>) {<br>
<span class="keyword">@if</span> <span class="variable">$level</span> == <span class="value">sm</span> {<br>
<span class="property">box-shadow</span>: <span class="value">0 2px 4px rgba(0,0,0,0.1)</span>;<br>
}<br>
<span class="keyword">@else if</span> <span class="variable">$level</span> == <span class="value">md</span> {<br>
<span class="property">box-shadow</span>: <span class="value">0 4px 8px rgba(0,0,0,0.15)</span>;<br>
}<br>
<span class="keyword">@else if</span> <span class="variable">$level</span> == <span class="value">lg</span> {<br>
<span class="property">box-shadow</span>: <span class="value">0 8px 16px rgba(0,0,0,0.2)</span>;<br>
}<br>
}<br><br>
<span class="comment">// Using parameterized mixins</span><br>
<span class="selector">.btn-success</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">button-theme</span>(<span class="value">#2ecc71</span>);<br>
<span class="keyword">@include</span> <span class="mixin-name">box-shadow</span>(<span class="value">md</span>);<br>
}<br><br>
<span class="selector">.btn-warning</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">button-theme</span>(<span class="value">#f39c12</span>, <span class="value">#2c3e50</span>);<br>
<span class="keyword">@include</span> <span class="mixin-name">box-shadow</span>(<span class="value">sm</span>);<br>
}
</div>
</div>
<div class="code-panel">
<h3>📄 Compiled CSS</h3>
<div class="css-code">
<span class="selector">.btn-success</span> {<br>
<span class="property">background-color</span>: <span class="value">#2ecc71</span>;<br>
<span class="property">color</span>: <span class="value">white</span>;<br>
<span class="property">border</span>: <span class="value">2px solid #27ae60</span>;<br>
<span class="property">box-shadow</span>: <span class="value">0 4px 8px rgba(0,0,0,0.15)</span>;<br>
}<br><br>
<span class="selector">.btn-success:hover</span> {<br>
<span class="property">background-color</span>: <span class="value">#27ae60</span>;<br>
<span class="property">transform</span>: <span class="value">translateY(-2px)</span>;<br>
}<br><br>
<span class="selector">.btn-warning</span> {<br>
<span class="property">background-color</span>: <span class="value">#f39c12</span>;<br>
<span class="property">color</span>: <span class="value">#2c3e50</span>;<br>
<span class="property">border</span>: <span class="value">2px solid #e67e22</span>;<br>
<span class="property">box-shadow</span>: <span class="value">0 2px 4px rgba(0,0,0,0.1)</span>;<br>
}<br><br>
<span class="selector">.btn-warning:hover</span> {<br>
<span class="property">background-color</span>: <span class="value">#e67e22</span>;<br>
<span class="property">transform</span>: <span class="value">translateY(-2px)</span>;<br>
}
</div>
</div>
</div>
<div class="demo-area">
<h3>🚀 Live Demo - Mixins in Action</h3>
<div class="flex-center" style="min-height: 200px; background: #f8f9fa; border-radius: 10px; margin: 1rem 0;">
<div class="text-center">
<h4 class="text-2xl font-bold">Flex Center Mixin</h4>
<p>This container uses the flex-center mixin</p>
</div>
</div>
<h4>Button Mixins with Themes</h4>
<div class="text-center">
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
</div>
<h4>Shadow Mixins</h4>
<div class="flex-center" style="gap: 2rem; flex-wrap: wrap;">
<div class="card shadow-sm" style="width: 150px; height: 100px;">
<div class="text-center">Small Shadow</div>
</div>
<div class="card shadow-md" style="width: 150px; height: 100px;">
<div class="text-center">Medium Shadow</div>
</div>
<div class="card shadow-lg" style="width: 150px; height: 100px;">
<div class="text-center">Large Shadow</div>
</div>
</div>
<h4>Border Radius Mixins</h4>
<div class="flex-center" style="gap: 2rem; flex-wrap: wrap;">
<div class="card border-radius-sm" style="width: 100px; height: 80px; background: #3498db;"></div>
<div class="card border-radius-md" style="width: 100px; height: 80px; background: #2ecc71;"></div>
<div class="card border-radius-lg" style="width: 100px; height: 80px; background: #e74c3c;"></div>
</div>
</div>
<div class="card">
<h3>💡 Why Use Mixins?</h3>
<ul>
<li><strong>Code Reusability:</strong> Write once, use everywhere</li>
<li><strong>Consistency:</strong> Maintain consistent styling across components</li>
<li><strong>Maintainability:</strong> Update styles in one place</li>
<li><strong>Flexibility:</strong> Use parameters for dynamic styling</li>
<li><strong>Organization:</strong> Group related styles together</li>
<li><strong>Reduced Repetition:</strong> Eliminate duplicate code</li>
</ul>
</div>
</div>
</body>
</html>Advanced Mixin Techniques
Content Blocks (@content)
Pass custom CSS blocks to your mixins for maximum flexibility.
@mixin responsive($breakpoint) {
@media (...) {
@content;
}
}
Utility Mixins
Create reusable utility classes for common patterns.
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
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 Mixins - 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; }
.mixin-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 mixins */
.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);
}
.card {
background: white;
border-radius: 10px;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
margin: 0.5rem;
border: none;
border-radius: 5px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.gradient-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.gradient-success {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
}
.gradient-warning {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.text-truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.media-query-demo {
background: #3498db;
color: white;
padding: 1rem;
border-radius: 5px;
margin: 0.5rem 0;
text-align: center;
}
@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 Mixins</h1>
<p>Content Blocks, Media Queries, and Real-World Patterns</p>
</div>
<!-- Content Blocks -->
<div class="feature-card">
<h3>🏗️ Content Blocks (@content)</h3>
<div class="code-comparison">
<div class="sass-code">
<span class="comment">// Mixin with content block</span><br>
<span class="keyword">@mixin</span> <span class="mixin-name">media-query</span>(<span class="variable">$breakpoint</span>) {<br>
<span class="keyword">@if</span> <span class="variable">$breakpoint</span> == <span class="value">mobile</span> {<br>
<span class="keyword">@media</span> (<span class="property">max-width</span>: <span class="value">768px</span>) {<br>
<span class="keyword">@content</span>;<br>
}<br>
}<br>
<span class="keyword">@else if</span> <span class="variable">$breakpoint</span> == <span class="value">tablet</span> {<br>
<span class="keyword">@media</span> (<span class="property">min-width</span>: <span class="value">769px</span>) <span class="keyword">and</span> (<span class="property">max-width</span>: <span class="value">1024px</span>) {<br>
<span class="keyword">@content</span>;<br>
}<br>
}<br>
<span class="keyword">@else if</span> <span class="variable">$breakpoint</span> == <span class="value">desktop</span> {<br>
<span class="keyword">@media</span> (<span class="property">min-width</span>: <span class="value">1025px</span>) {<br>
<span class="keyword">@content</span>;<br>
}<br>
}<br>
}<br><br>
<span class="keyword">@mixin</span> <span class="mixin-name">hover-effect</span> {<br>
<span class="property">transition</span>: <span class="value">all 0.3s ease</span>;<br><br>
<span class="selector">&:hover</span> {<br>
<span class="keyword">@content</span>;<br>
}<br>
}<br><br>
<span class="comment">// Using content blocks</span><br>
<span class="selector">.responsive-element</span> {<br>
<span class="property">padding</span>: <span class="value">2rem</span>;<br><br>
<span class="keyword">@include</span> <span class="mixin-name">media-query</span>(<span class="value">mobile</span>) {<br>
<span class="property">padding</span>: <span class="value">1rem</span>;<br>
<span class="property">font-size</span>: <span class="value">0.9rem</span>;<br>
}<br>
}<br><br>
<span class="selector">.interactive-card</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">hover-effect</span> {<br>
<span class="property">transform</span>: <span class="value">translateY(-5px)</span>;<br>
<span class="property">box-shadow</span>: <span class="value">0 8px 16px rgba(0,0,0,0.2)</span>;<br>
}<br>
}
</div>
<div class="css-code">
<span class="selector">.responsive-element</span> {<br>
<span class="property">padding</span>: <span class="value">2rem</span>;<br>
}<br><br>
<span class="keyword">@media</span> (<span class="property">max-width</span>: <span class="value">768px</span>) {<br>
<span class="selector">.responsive-element</span> {<br>
<span class="property">padding</span>: <span class="value">1rem</span>;<br>
<span class="property">font-size</span>: <span class="value">0.9rem</span>;<br>
}<br>
}<br><br>
<span class="selector">.interactive-card</span> {<br>
<span class="property">transition</span>: <span class="value">all 0.3s ease</span>;<br>
}<br><br>
<span class="selector">.interactive-card:hover</span> {<br>
<span class="property">transform</span>: <span class="value">translateY(-5px)</span>;<br>
<span class="property">box-shadow</span>: <span class="value">0 8px 16px rgba(0,0,0,0.2)</span>;<br>
}
</div>
</div>
<div class="demo-section">
<h4>Media Query Mixin Demo</h4>
<div class="media-query-demo">
Resize your browser to see different styles applied!
</div>
<h4>Hover Effect Mixin</h4>
<div class="card interactive-card" style="cursor: pointer;">
Hover over this card to see the effect
</div>
</div>
</div>
<!-- Utility Mixins -->
<div class="feature-card">
<h3>🔧 Utility Mixins</h3>
<div class="code-comparison">
<div class="sass-code">
<span class="comment">// Common utility mixins</span><br>
<span class="keyword">@mixin</span> <span class="mixin-name">absolute-center</span> {<br>
<span class="property">position</span>: <span class="value">absolute</span>;<br>
<span class="property">top</span>: <span class="value">50%</span>;<br>
<span class="property">left</span>: <span class="value">50%</span>;<br>
<span class="property">transform</span>: <span class="value">translate(-50%, -50%)</span>;<br>
}<br><br>
<span class="keyword">@mixin</span> <span class="mixin-name">text-truncate</span> {<br>
<span class="property">overflow</span>: <span class="value">hidden</span>;<br>
<span class="property">white-space</span>: <span class="value">nowrap</span>;<br>
<span class="property">text-overflow</span>: <span class="value">ellipsis</span>;<br>
}<br><br>
<span class="keyword">@mixin</span> <span class="mixin-name">gradient-bg</span>(<span class="variable">$color1</span>, <span class="variable">$color2</span>, <span class="variable">$angle</span>: <span class="value">135deg</span>) {<br>
<span class="property">background</span>: <span class="value">linear-gradient(</span><span class="variable">$angle</span>, <span class="variable">$color1</span>, <span class="variable">$color2</span><span class="value">)</span>;<br>
}<br><br>
<span class="keyword">@mixin</span> <span class="mixin-name">responsive-grid</span>(<span class="variable">$min-width</span>: <span class="value">200px</span>) {<br>
<span class="property">display</span>: <span class="value">grid</span>;<br>
<span class="property">grid-template-columns</span>: <span class="value">repeat(auto-fit, minmax(</span><span class="variable">$min-width</span>, <span class="value">1fr))</span>;<br>
<span class="property">gap</span>: <span class="value">1rem</span>;<br>
}<br><br>
<span class="comment">// Using utility mixins</span><br>
<span class="selector">.modal</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">absolute-center</span>;<br>
<span class="keyword">@include</span> <span class="mixin-name">gradient-bg</span>(<span class="value">#667eea</span>, <span class="value">#764ba2</span>);<br>
}<br><br>
<span class="selector">.card-grid</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">responsive-grid</span>(<span class="value">250px</span>);<br>
}<br><br>
<span class="selector">.truncated-text</span> {<br>
<span class="keyword">@include</span> <span class="mixin-name">text-truncate</span>;<br>
<span class="property">max-width</span>: <span class="value">200px</span>;<br>
}
</div>
<div class="css-code">
<span class="selector">.modal</span> {<br>
<span class="property">position</span>: <span class="value">absolute</span>;<br>
<span class="property">top</span>: <span class="value">50%</span>;<br>
<span class="property">left</span>: <span class="value">50%</span>;<br>
<span class="property">transform</span>: <span class="value">translate(-50%, -50%)</span>;<br>
<span class="property">background</span>: <span class="value">linear-gradient(135deg, #667eea, #764ba2)</span>;<br>
}<br><br>
<span class="selector">.card-grid</span> {<br>
<span class="property">display</span>: <span class="value">grid</span>;<br>
<span class="property">grid-template-columns</span>: <span class="value">repeat(auto-fit, minmax(250px, 1fr))</span>;<br>
<span class="property">gap</span>: <span class="value">1rem</span>;<br>
}<br><br>
<span class="selector">.truncated-text</span> {<br>
<span class="property">overflow</span>: <span class="value">hidden</span>;<br>
<span class="property">white-space</span>: <span class="value">nowrap</span>;<br>
<span class="property">text-overflow</span>: <span class="value">ellipsis</span>;<br>
<span class="property">max-width</span>: <span class="value">200px</span>;<br>
}
</div>
</div>
<div class="demo-section">
<h4>Utility Mixins Demo</h4>
<h5>Responsive Grid</h5>
<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>
<h5>Gradient Backgrounds</h5>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<button class="btn gradient-primary">Gradient Primary</button>
<button class="btn gradient-success">Gradient Success</button>
<button class="btn gradient-warning">Gradient Warning</button>
</div>
<h5>Text Truncate</h5>
<div class="text-truncate" style="max-width: 200px; background: white; padding: 0.5rem; border-radius: 4px;">
This is a very long text that will be truncated with ellipsis
</div>
</div>
</div>
</div>
</body>
</html>Mixins Best Practices
Single Responsibility Principle
Each mixin should have a single, focused purpose. Avoid creating "god mixins" that try to do too many things at once.
// Good: Focused mixins
@mixin flex-center { ... }
@mixin text-truncate { ... }
@mixin button-base { ... }
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 Mixins - 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 Mixins Best Practices</h1>
<p>Write maintainable, efficient mixins for scalable projects</p>
</div>
<div class="practices-grid">
<div class="practice-card">
<h3>📏 Single Responsibility Principle</h3>
<p>Each mixin should do one thing well:</p>
<div class="do-dont">
<div class="do">
<strong>✅ Focused Mixins</strong>
<div class="good-example">
@mixin flex-center {<br>
display: flex;<br>
justify-content: center;<br>
align-items: center;<br>
}<br><br>
@mixin text-truncate {<br>
overflow: hidden;<br>
white-space: nowrap;<br>
text-overflow: ellipsis;<br>
}
</div>
</div>
<div class="dont">
<strong>❌ Overloaded Mixins</strong>
<div class="bad-example">
@mixin do-everything {<br>
display: flex;<br>
padding: 2rem;<br>
background: blue;<br>
border-radius: 10px;<br>
box-shadow: ...;<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">
@mixin responsive-grid<br>
@mixin text-truncate<br>
@mixin absolute-center<br>
@mixin gradient-background<br>
@mixin box-shadow-level
</div>
</div>
<div class="dont">
<strong>❌ Vague Names</strong>
<div class="bad-example">
@mixin style1<br>
@mixin my-mixin<br>
@mixin temp<br>
@mixin test<br>
@mixin mixin
</div>
</div>
</div>
</div>
<div class="practice-card">
<h3>⚡ Performance Considerations</h3>
<p>Optimize mixins for better performance:</p>
<div class="performance-tips">
<strong>💡 Performance Tips:</strong>
<ul>
<li>Avoid deeply nested mixins</li>
<li>Use placeholders for extend-only styles</li>
<li>Limit complex calculations in frequently used mixins</li>
<li>Consider CSS custom properties for dynamic values</li>
</ul>
</div>
<div class="do-dont">
<div class="do">
<strong>✅ Efficient</strong>
<div class="good-example">
@mixin fast-mixin {<br>
property: value;<br>
another: value;<br>
}
</div>
</div>
<div class="dont">
<strong>❌ Heavy</strong>
<div class="bad-example">
@mixin slow-mixin {<br>
@include other-mixin;<br>
@include another-mixin;<br>
complex: calculate(things);<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">
@mixin button-theme(<br>
$bg-color,<br>
$text-color: white,<br>
$padding: 1rem 2rem<br>
) { ... }
</div>
</div>
<div class="dont">
<strong>❌ Poor Parameters</strong>
<div class="bad-example">
@mixin confusing-mixin(<br>
$a, $b, $c, $d, $e,<br>
$f: null, $g: false<br>
) { ... }
</div>
</div>
</div>
</div>
</div>
<div class="practice-card">
<h3>🏗️ Common Mixin Patterns</h3>
<div class="pattern-grid">
<div class="pattern-card">
<h4>Utility Mixins</h4>
<div class="good-example">
@mixin sr-only {<br>
position: absolute;<br>
width: 1px;<br>
height: 1px;<br>
padding: 0;<br>
margin: -1px;<br>
overflow: hidden;<br>
clip: rect(0, 0, 0, 0);<br>
white-space: nowrap;<br>
border: 0;<br>
}
</div>
</div>
<div class="pattern-card">
<h4>Layout Mixins</h4>
<div class="good-example">
@mixin container {<br>
max-width: 1200px;<br>
margin: 0 auto;<br>
padding: 0 1rem;<br>
}<br><br>
@mixin grid-layout {<br>
display: grid;<br>
gap: 1rem;<br>
}
</div>
</div>
<div class="pattern-card">
<h4>Component Mixins</h4>
<div class="good-example">
@mixin card-base {<br>
background: white;<br>
border-radius: 8px;<br>
box-shadow: 0 2px 4px rgba(0,0,0,0.1);<br>
padding: 1.5rem;<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 code in your stylesheets</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h4>Create Mixins</h4>
<p>Extract patterns into focused mixins</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h4>Test Thoroughly</h4>
<p>Ensure mixins work in different contexts</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h4>Document</h4>
<p>Add comments explaining usage</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 mixins focused and single-purpose</li>
<li>Use descriptive, meaningful names</li>
<li>Provide sensible default values</li>
<li>Document complex mixins</li>
<li>Test mixins in different scenarios</li>
</ul>
</div>
<div class="dont">
<strong>❌ Avoid These:</strong>
<ul>
<li>Creating overly complex mixins</li>
<li>Using vague or confusing names</li>
<li>Mixing unrelated functionality</li>
<li>Forgetting to provide defaults</li>
<li>Creating mixins for one-time use</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>Mixins vs Functions
🔄 Mixins
Output CSS blocks, reusable styles
🎯 Functions
Return values, calculations
🤝 Together
Powerful combination for complex systems
Mixins 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 Mixins 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; }
.keyword { color: #e74c3c; font-weight: bold; }
.mixin-name { color: #9b59b6; }
.function-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 Mixins vs Functions</h1>
<p>Understanding when to use mixins 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">// 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 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>
</div>
<div class="comparison-section">
<h2>🎯 When to Use Each</h2>
<div class="use-case-grid">
<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 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>
</div>
<div class="comparison-section">
<h2>🚀 Benefits Comparison</h2>
<div class="benefits-grid">
<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>Value computation and transformation</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">📦</div>
<h3>Mixins</h3>
<p>Output complete style blocks</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🔢</div>
<h3>Functions</h3>
<p>Return single values for properties</p>
</div>
</div>
</div>
<div class="demo-area">
<h3>🏗️ Real-World Examples</h3>
<div class="comparison-grid">
<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 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>
</div>
<div class="decision-guide">
<h3>🎯 Decision Guide</h3>
<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>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>Remember:</strong> Mixins output CSS, functions return values. Use mixins for
style patterns and functions for value computations.</p>
</div>
<div class="comparison-section">
<h2>🔗 Working Together</h2>
<p>Mixins and functions 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
🏗️ Component Architecture
- Button component variants
- Card layout systems
- Form control styles
- Navigation patterns
- Modal and overlay components
🔧 Utility Systems
- Spacing and layout utilities
- Typography scale systems
- Color theming mixins
- Responsive design helpers
- Animation and transition utilities
💡 Pro Tips for Effective Mixins
Structure:
- Keep mixins focused and single-purpose
- Use descriptive, meaningful names
- Provide sensible default values
- Document complex mixins with comments
Usage:
- Use for repeated style patterns
- Combine with functions for calculations
- Create mixin libraries for teams
- Test mixins in different contexts
Ready to Master Sass Mixins? 🔄
Start using Sass mixins to create reusable, maintainable CSS that eliminates repetition and ensures consistency across your entire project.