SCSS Complete Reference 2026: ALL Features 🚀

Guide CSS

SCSS Complete 2026: EVERY Feature Mastered 🚀

SCSS Full Power: Variables • Nesting • Mixins • Functions • Loops (@for/@each) • If/Else • Inheritance (@extend) • Math Operations • Debug/Warn/Error • Content Blocks • Modules • ALL @rules = 95% less CSS repetition, programmatic styling, enterprise design systems.

🎯 ALL SCSS Features Matrix

Feature	Syntax	Use Case
Variables	`$var: value`	Design tokens
Nesting	`&child`	DRY selectors
Mixins	`@mixin name() {}`	Reusable blocks
Functions	`@function name() { @return }`	Math/logic
@for	`@for $i from 1 through 12`	Grid systems
@each	`@each $item in $list`	Dynamic classes
@if/@else	`@if $condition {}`	Conditional
@extend	`@extend .base`	Inheritance
Math	`math.div()`, `+ - * / %`	Calculations
Debug	`@debug $var`	Development

🔥 1. VARIABLES (Design Tokens)

// Global design tokens
$primary: #3b82f6;
$colors: (
  blue: #3b82f6,
  green: #10b981,
  red: #ef4444
);
$breakpoints: (sm: 640px, md: 768px, lg: 1024px);

// Local variables
.button {
  $radius: 0.5rem;
  border-radius: $radius;
}

🧩 2. MIXINS (Reusable Blocks)

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

// Mixin with parameters + defaults
@mixin button($bg: $primary, $size: md, $rounded: true) {
  display: inline-flex;
  gap: 0.5rem;
  padding: if($size == lg, 1.5rem 2.5rem, 1rem 2rem);
  background: $bg;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  
  @if $rounded { border-radius: 0.5rem; }
  
  &:hover { opacity: 0.9; }
}

// Usage
.primary-btn { @include button(); }
.danger-btn { @include button($bg: #ef4444, $size: lg); }
.square-btn { @include button($rounded: false); }

⚙️ 3. FUNCTIONS (Return Values)

// Custom spacing function
@function spacing($scale) {
  $scales: (xs: 0.25rem, sm: 0.5rem, md: 1rem, lg: 1.5rem, xl: 2rem);
  @return map-get($scales, $scale);
}

// Color manipulation
@function lighten-color($color, $amount: 10%) {
  @return lighten($color, $amount);
}

@function px-to-rem($px, $base: 16px) {
  @return math.div($px, $base) * 1rem;
}

// Usage
.card {
  padding: spacing(lg);
  margin-bottom: spacing(xl);
  background: lighten-color(#111827, 5%);
  border-radius: px-to-rem(12px);
}

🔄 4. LOOPS (@for / @each)

@for Loop (Numeric)

// Grid system (1-12 columns)
@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}

// Spacing utilities
@for $i from 0 through 96 {
  .p-#{$i} { padding: #{$i * 0.25}rem; }
  .m-#{$i} { margin: #{$i * 0.25}rem; }
}

@each Loop (Lists/Maps)

// Color utilities
$colors: (primary: blue, success: green, danger: red);
@each $name, $color in $colors {
  .bg-#{$name} { background: $color; }
  .text-#{$name} { color: $color; }
}

// Breakpoint utilities
$breakpoints: (sm: 640px, md: 768px, lg: 1024px);
@each $name, $width in $breakpoints {
  @media (min-width: $width) {
    .#{$name}:\col-#{$name} { display: block; }
  }
}

✅ 5. CONTROL FLOW (@if/@else/@else if)

@mixin triangle($size, $color, $direction) {
  width: 0;
  height: 0;
  border: $size solid transparent;
  
  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Invalid direction: #{$direction}";
  }
}

.up-arrow { @include triangle(10px, red, up); }
.right-arrow { @include triangle(10px, blue, right); }

🎭 6. INHERITANCE (@extend)

// Base button
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

// Extend base
.btn-primary { @extend .btn; background: blue; }
.btn-success { @extend .btn; background: green; }
.btn-danger { @extend .btn; background: red; }

➕ 7. MATH OPERATIONS (Built-in + Custom)

// Basic operators
$width: 100px;
$height: $width * 2;
$margin: $width / 4;

// sass:math module
@use 'sass:math';

$circle-radius: math.div(100px, 2);  // 50px
$percentage: math.round(33.333%);    // 33%
$clamped: math.clamp(0, 50px, 200px); // 50px

.container {
  width: $width;
  height: $height;
  margin: $margin;
  border-radius: $circle-radius;
}

🐛 8. DEBUGGING (@debug/@warn/@error)

$env: production; // Set in build script

@mixin debug-info($name) {
  @if $env == development {
    @debug "Building #{$name}...";
    border: 1px solid red; // Debug border
  }
  
  @warn "Custom warning for #{$name}";
  @error "This will crash the build";
}

.component {
  @include debug-info('header');
}

📦 9. CONTENT BLOCKS (Advanced Mixins)

// Mixins can accept content blocks
@mixin border-radius($radius) {
  border-radius: $radius;
  
  @content; // Insert caller's content
}

@mixin button-group {
  display: flex;
  gap: 0.5rem;
  
  // Repeat content for each button state
  @content;
  @content;
}

.primary {
  @include border-radius(0.5rem) {
    background: blue;
  }
}

.btn-group {
  @include button-group {
    @include button(blue);
  } {
    @include button(green);
  }
}

🎯 10. ALL @RULES Complete Reference

// Control Directives
@if $condition { }
@else if $condition { }
@else { }
@for $i from 1 through 10 { }
@each $item in $list { }
@while $i < 10 { }
@return $value; // Functions only

// Import/Use
@import 'filename';
@use 'module' as prefix;
@forward 'module'; // Module forwarding

// Media/Context
@media (min-width: 768px) { }
@supports (display: grid) { }
@layer utilities { }

// Debug
@debug "message";
@warn "warning";
@error "error";

🏗️ 11. MODULES SYSTEM (Modern SCSS)

styles/ ├── _variables.scss ├── _mixins.scss ├── _functions.scss └── main.scss

// _variables.scss
$primary: #3b82f6;
$spacing: (sm: 1rem, md: 2rem, lg: 3rem);

/* _mixins.scss */
@use 'variables';
@mixin container {
  max-width: 1200px;
  margin: 0 auto;
  padding: variables.$spacing(sm);
}

/* main.scss */
@use 'mixins';
@use 'variables';

.page {
  @include mixins.container;
  background: variables.$primary;
}

🎨 12. PRODUCTION EXAMPLE: Complete Component

@use 'sass:math';
@use 'variables' as vars;

// Complete responsive card system
@mixin card($size: md, $theme: light) {
  $radii: (sm: 0.25rem, md: 0.5rem, lg: 1rem);
  $padding: map-get(vars.$spacing, $size);
  
  background: if($theme == dark, #1f2937, white);
  padding: $padding;
  border-radius: map-get($radii, $size);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  
  @media (min-width: 768px) {
    padding: math.div($padding * 1.5, 1);
  }
}

.card {
  @include card();
  &-large { @include card(lg); }
  &-dark { @include card(md, dark); }
}

🚀 Build Configuration (Vite/Next.js)

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  }
};

📊 Feature Completeness

✅ Variables ($var) ✓ ✅ Nesting (&child) ✓ ✅ Mixins (@mixin/@include) ✓ ✅ Functions (@function/@return) ✓ ✅ @for loops ✓ ✅ @each loops ✓ ✅ @if/@else/@else if ✓ ✅ @extend (inheritance) ✓ ✅ Math (sass:math + operators) ✓ ✅ @debug/@warn/@error ✓ ✅ Content blocks (@content) ✓ ✅ Modules (@use/@forward) ✓ ✅ ALL @rules ✓

🎯 FINAL PRODUCTION CHECKLIST

✅ Design tokens (variables/maps) ✅ Responsive utilities (@for/@each) ✅ Theme switching (@if + CSS vars) ✅ Component system (mixins) ✅ Type-safe functions ✅ Debug tools (@debug/@warn) ✅ Modular architecture (@use) ✅ Zero runtime JS ✅ Tree-shakable CSS

SCSS = CSS Compiler. Every feature powers production design systems with zero JavaScript, full IDE support, and infinite scalability.

Mastered SCSS? → Build enterprise UIs 🚀