Mathematical Utilities

/**
 * Strips the unit from a number
 * @param $value - Number with or without unit
 * @returns number - Unitless numeric value
 */
@function strip-unit($value);

$base-font-size: 16px;
$line-height-ratio: 1.5;

// Strip unit for calculations
.element {
  font-size: $base-font-size;
  line-height: strip-unit($base-font-size) * $line-height-ratio * 1px;
  // Result: line-height: 24px;
}

// Unit conversion calculations
$rem-base: 16px;

@function px-to-rem($px) {
  @return strip-unit($px) / strip-unit($rem-base) * 1rem;
}

.responsive-text {
  font-size: px-to-rem(18px);
  // Result: font-size: 1.125rem;
}

// Percentage calculations
$container-width: 960px;
$sidebar-width: 300px;

.main-content {
  width: (strip-unit($container-width) - strip-unit($sidebar-width)) / strip-unit($container-width) * 100%;
  // Result: width: 68.75%;
}

// Base values for conversions
$base-font-size: 16px !default;
$base-line-height: 24px !default;

// Convert pixels to rem
@function px-to-rem($px) {
  @return strip-unit($px) / strip-unit($base-font-size) * 1rem;
}

// Convert pixels to em
@function px-to-em($px, $context: $base-font-size) {
  @return strip-unit($px) / strip-unit($context) * 1em;
}

// Convert rem to pixels
@function rem-to-px($rem) {
  @return strip-unit($rem) * strip-unit($base-font-size) * 1px;
}

// Usage examples
.typography {
  font-size: px-to-rem(18px);        // 1.125rem
  margin-bottom: px-to-em(12px, 18px); // 0.667em
  line-height: px-to-rem(27px);      // 1.6875rem
}

// Fluid typography calculation
@function fluid-size($min-size, $max-size, $min-width: 320px, $max-width: 1200px) {
  $min-size-unitless: strip-unit($min-size);
  $max-size-unitless: strip-unit($max-size);
  $min-width-unitless: strip-unit($min-width);
  $max-width-unitless: strip-unit($max-width);
  
  $slope: ($max-size-unitless - $min-size-unitless) / ($max-width-unitless - $min-width-unitless);\n  $intercept: $min-size-unitless - $slope * $min-width-unitless;\n  \n  @return calc(#{$intercept}px + #{$slope * 100}vw);\n}\n\n// Usage\n.fluid-heading {\n  font-size: fluid-size(24px, 48px);\n  // Result: calc(20px + 2.727vw)\n}\n\n// Container width calculations\n@function container-width($columns, $gutter: 20px, $column-width: 60px) {\n  $total-gutters: ($columns - 1) * strip-unit($gutter);\n  $total-columns: $columns * strip-unit($column-width);\n  @return ($total-columns + $total-gutters) * 1px;\n}\n\n.grid-container {\n  max-width: container-width(12);  // 920px\n  margin: 0 auto;\n}\n```\n\n### Aspect Ratio Calculations\n\n```scss\n// Calculate height from width and aspect ratio\n@function aspect-height($width, $ratio: 16/9) {\n  @return strip-unit($width) / $ratio * 1px;\n}\n\n// Calculate width from height and aspect ratio\n@function aspect-width($height, $ratio: 16/9) {\n  @return strip-unit($height) * $ratio * 1px;\n}\n\n.video-container {\n  width: 100%;\n  height: aspect-height(800px, 16/9);  // 450px\n  \n  .video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n\n.square-image {\n  width: 200px;\n  height: aspect-height(200px, 1);  // 200px (perfect square)\n}\n```\n\n### Color Value Calculations\n\n```scss\n// Extract numeric values from colors for calculations\n@function luminance-value($color) {\n  $red: red($color);\n  $green: green($color);\n  $blue: blue($color);\n  \n  // Convert to 0-1 range\n  $red-norm: strip-unit($red) / 255;\n  $green-norm: strip-unit($green) / 255;\n  $blue-norm: strip-unit($blue) / 255;\n  \n  @return 0.299 * $red-norm + 0.587 * $green-norm + 0.114 * $blue-norm;\n}\n\n// Usage in color contrast decisions\n.dynamic-text {\n  $bg-color: #3498db;\n  $luminance: luminance-value($bg-color);\n  \n  background-color: $bg-color;\n  color: if($luminance > 0.5, #000, #fff);\n}\n```\n\n### Grid System Calculations\n\n```scss\n$grid-columns: 12 !default;\n$grid-gutter: 30px !default;\n\n// Calculate column width percentage\n@function grid-width($columns) {\n  @return strip-unit($columns) / strip-unit($grid-columns) * 100%;\n}\n\n// Calculate gutter as percentage\n@function grid-gutter-percent($container-width: 1200px) {\n  @return strip-unit($grid-gutter) / strip-unit($container-width) * 100%;\n}\n\n// Generate grid classes\n@for $i from 1 through $grid-columns {\n  .col-#{$i} {\n    width: grid-width($i);\n  }\n}\n\n.col-6 {  // width: 50%\n  width: grid-width(6);\n}\n\n.col-8 {  // width: 66.667%\n  width: grid-width(8);\n}\n```\n\n### Animation Timing Calculations\n\n```scss\n// Calculate staggered animation delays\n@function stagger-delay($index, $base-delay: 0.1s, $increment: 0.05s) {\n  $base-unitless: strip-unit($base-delay);\n  $increment-unitless: strip-unit($increment);\n  @return ($base-unitless + ($index - 1) * $increment-unitless) * 1s;\n}\n\n// Generate staggered animations\n@for $i from 1 through 5 {\n  .item:nth-child(#{$i}) {\n    animation-delay: stagger-delay($i);\n  }\n}\n\n.item:nth-child(1) { animation-delay: 0.1s; }\n.item:nth-child(2) { animation-delay: 0.15s; }\n.item:nth-child(3) { animation-delay: 0.2s; }\n// ... and so on\n```\n\n### Scaling and Proportional Calculations\n\n```scss\n// Scale values proportionally\n@function scale-value($value, $scale-factor) {\n  @return strip-unit($value) * $scale-factor * 1px;\n}\n\n// Create scaled variants\n$base-padding: 16px;\n\n.padding-sm { padding: scale-value($base-padding, 0.5); }    // 8px\n.padding-md { padding: $base-padding; }                      // 16px  \n.padding-lg { padding: scale-value($base-padding, 1.5); }    // 24px\n.padding-xl { padding: scale-value($base-padding, 2); }      // 32px\n\n// Golden ratio calculations\n$golden-ratio: 1.618;\n\n@function golden-scale($base, $steps: 1) {\n  $result: strip-unit($base);\n  @for $i from 1 through abs($steps) {\n    @if $steps > 0 {\n      $result: $result * $golden-ratio;\n    } @else {\n      $result: $result / $golden-ratio;\n    }\n  }\n  @return $result * 1px;\n}\n\n.golden-text {\n  font-size: golden-scale(16px, 1);   // ~25.9px\n  line-height: golden-scale(16px, 2); // ~41.9px\n}\n```\n\n## Error Handling and Edge Cases\n\n```scss\n// The strip-unit function handles various input types:\n.test-cases {\n  // With units\n  width: strip-unit(100px);     // 100\n  height: strip-unit(50%);      // 50\n  margin: strip-unit(2rem);     // 2\n  \n  // Unitless numbers (returns as-is)\n  z-index: strip-unit(10);      // 10\n  \n  // Zero values\n  border: strip-unit(0px);      // 0\n  padding: strip-unit(0);       // 0\n}\n\n// Safe division function with strip-unit\n@function safe-divide($dividend, $divisor) {\n  @if strip-unit($divisor) == 0 {\n    @warn \"Division by zero attempted\";\n    @return 0;\n  }\n  @return strip-unit($dividend) / strip-unit($divisor);\n}\n```