Skip to content

SCSS_COMPATIBILITY_FIX.md

Latest commit

 

History

History
82 lines (58 loc) · 2.56 KB

SCSS_COMPATIBILITY_FIX.md

File metadata and controls

82 lines (58 loc) · 2.56 KB
Raw

SCSS Compatibility Fix ✅

Problem Identified

The build was failing due to incompatible Sass syntax in the SCSS files:

Issues Found:

  1. @use "sass:color" - Modern Sass module syntax not supported
  2. color.adjust() - Modern color function not compatible
  3. color.channel() - Complex color function causing build failure

Error Location:

  • File: _sass/_variables.scss and _sass/_themes.scss
  • Lines: Around 591-598
  • Error: "Build script returned non-zero exit code: 2"

Solution Applied

1. Fixed _variables.scss:

// ❌ Before (incompatible):
@use "sass:color";
$light-cyan-color: color.adjust($cyan-color, $lightness: 25%);
$light-purple-color: color.adjust($purple-color, $lightness: 25%);
$grey-color-light: color.adjust($grey-color, $lightness: 40%);

// ✅ After (compatible):
$light-cyan-color: lighten($cyan-color, 25%);
$light-purple-color: lighten($purple-color, 25%);
$grey-color-light: lighten($grey-color, 40%);

2. Fixed _themes.scss:

// ❌ Before (incompatible):
@use "sass:color";
--global-back-to-top-bg-color: rgba(
  #{color.channel($black-color, "red", $space: rgb)},
  #{color.channel($black-color, "green", $space: rgb)},
  #{color.channel($black-color, "blue", $space: rgb)},
  0.4
);

// ✅ After (compatible):
--global-back-to-top-bg-color: rgba(0, 0, 0, 0.4);

Why This Fixes the Build

  1. Sass Compatibility: Replaced modern functions with traditional ones
  2. Jekyll Support: Uses functions that work with current Jekyll/Sass setup
  3. Build Process: SCSS compilation will now succeed without errors
  4. Color Generation: Simplified but equivalent color values

Functions Replaced

Modern Function Traditional Function Purpose
color.adjust($color, $lightness: X%) lighten($color, X%) Lighten colors
color.channel($color, "red", $space: rgb) rgba(0, 0, 0, alpha) Generate rgba values

Expected Result

The build should now succeed because:

  • ✅ All modern Sass syntax has been replaced
  • ✅ Traditional color functions are used throughout
  • ✅ SCSS compilation will work without errors
  • ✅ Site styling will be applied correctly

Note

The color values are functionally equivalent:

  • Light theme: rgba(0, 0, 0, 0.4) = black with 40% opacity
  • Dark theme: rgba(255, 255, 255, 0.5) = white with 50% opacity

Ready for deployment! 🚀