SCSS変数書き出し｜配色をSass変数として出力し管理

// Color Variables
$primary: #6366f1;
$secondary: #ec4899;
$accent: #f59e0b;
$success: #10b981;
$warning: #f59e0b;
$error: #ef4444;

// Color Map
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "accent": $accent,
  "success": $success,
  "warning": $warning,
  "error": $error
);

// Usage functions
@function color($name) {
  @return map-get($colors, $name);
}

// Generate utility classes
@each $name, $color in $colors {
  .bg-#{$name} {
    background-color: $color;
  }
  .text-#{$name} {
    color: $color;
  }
  .border-#{$name} {
    border-color: $color;
  }
}

// SCSS Mixins

@mixin background($color) {
  background-color: $color;
  
  @if lightness($color) > 50% {
    color: #1a1a1a;
  } @else {
    color: #ffffff;
  }
}

@mixin button-variant($bg, $hover: darken($bg, 10%)) {
  background-color: $bg;
  border-color: $bg;
  
  @if lightness($bg) > 50% {
    color: #1a1a1a;
  } @else {
    color: #ffffff;
  }
  
  &:hover {
    background-color: $hover;
    border-color: $hover;
  }
}

// Usage
.my-button {
  @include button-variant($primary);
}

.my-section {
  @include background($secondary);
}