💎 Sass: Engineering Professional Stylesheets

🎯 Introduction

Sass is not just a "better CSS"—it is a programming language for your styles. In this lesson, we will focus on the Core Essentials you need to build fast, and then provide a Mastery Bonus for those building industrial-grade design systems.

🏗️ Section 1: Setup & The 7-1 Architecture

The Live Sass Pipeline

1. Install the Live Sass Compiler extension in VS Code.
2. Click "Watch Sass" to turn your .scss logic into browser-ready .css in real-time.

Professional Workflow (7-1 Pattern)

Engineering projects use a modular folder structure:

• abstracts/: The "brain" (Variables, mixins).
• base/: The "bones" (Resets, typography).
• components/: The "muscles" (Buttons, cards).
• main.scss: The entry point that @uses everything else.

🟢 Section 2: The Core Five (What you NEED today)

1. Variables ($symbol)

Store values like colors or spacing once and reuse them everywhere.

$primary: #3498db;
$gap: 16px;

.btn { background: $primary; padding: $gap; }

2. Nesting

Organize code to match your HTML structure exactly.

.nav {
  ul { list-style: none; }
  li { display: inline-block; }
  a { text-decoration: none; &:hover { color: gold; } }
}

Best Practice: Rule of Three. Never nest deeper than 3 levels to avoid "Sass Soup."

3. Partials & Modules (@use)

Break styles into small files. Files starting with _ are "hidden" modules.

// main.scss
@use 'abstracts/variables' as var;
body { background: var.$primary; }

4. Mixins (Reusable Blocks)

Create a block of code and "drop" it into any selector.

@mixin flex-center {
  display: flex; justify-content: center; align-items: center;
}

.hero { @include flex-center; }

5. Color Morphing

Automate your hover states without picking new colors.

.btn {
  background: $primary;
  &:hover { background: darken($primary, 10%); }
}

💎 Section 3: Advanced Engineering Mastery (The Pro Bonus)

6. Mixins with Parameters

@mixin button($bg, $color: white) { background: $bg; color: $color; }
.btn-buy { @include button(blue); }

7. @extend (Selector Inheritance)

.error { border: 1px solid red; }
.error--serious { @extend .error; border-width: 3px; }

8. Functions

@function px-to-rem($px) { @return ($px / 16) * 1rem; }
.text { font-size: px-to-rem(24); }

9. Operators & sass:math

@use "sass:math";
.container { width: math.div(100%, 3); }

10. Maps & 11. Lists

$theme-colors: ( "light": #fff, "dark": #000 );
.bg-light { background: map-get($theme-colors, "light"); }

12. Loops (@each & @for)

@each $color, $value in $theme-colors {
  .bg-#{$color} { background-color: $value; }
}

13. Conditional Logic (@if/@else)

@mixin theme($dark: false) {
  @if $dark { background: black; color: white; } 
  @else { background: white; color: black; }
}

14. Placeholders (%)

Silent styles that produce no CSS unless @extended.

%card-base { padding: 20px; border-radius: 8px; }
.card { @extend %card-base; }

15. Error Handling (@error)

@mixin grid($cols) {
  @if $cols > 12 { @error "Max 12 cols allowed."; }
  grid-template-columns: repeat($cols, 1fr);
}

🚀 Section 4: 10 Strategic Tricks with Code

1. The Perfect Centering Mixin: @mixin center { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; }
2. Fluid Typography: font-size: clamp(1rem, 5vw, 2.5rem); (The modern Sass way).
3. Glassmorphism: @mixin glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
4. Interactive Morpher: Use mix($color, black, 80%) for rich hover states.
5. Breakpoint Manager: Create a map of sizes (sm, md, lg) and a mixin to call them.
6. BEM Generator: Use &__element to automate modular naming.
7. Triangle Generator: Use border math to create arrows without images.
8. Internal Helpers: Use private placeholders (%_hidden) for logic that shouldn't be global.
9. Utility Loop: Generate m-1, m-2, etc., in a single @for loop.
10. Aspect Ratio: Use math.div($height, $width) * 100% on a pseudo-element padding.

🎓 Choosing Your Tool