scss 颜色样式表外观自动从颜色列表生成颜色和背景

Posted 2021-05-18

@import 'variables';

$color-list:  'brand-color'   $brand-color,
              'turquoise'     #1abc9c,
              'green-sea'     #16a085,
              'emerland'      #2ecc71,
              'nephritis'     #27ae60,
              'peter-river'   #3498db,
              'belize-hole'   #2980b9,
              'amethyst'      #9b59b6,
              'wisteria'      #8e44ad,
              'wet-asphalt'   #34495e,
              'midnight-blue' #2c3e50,
              'sun-flower'    #f1c40f,
              'orange'        #f39c12,
              'carrot'        #e67e22,
              'pumpkin'       #d35400,
              'alizarin'      #e74c3c,
              'pomegranate'   #c0392b,
              'clouds'        #ecf0f1,
              'silver'        #bdc3c7,
              'concrete'      #95a5a6,
              'asbestos'      #7f8c8d;


@each $item in $color-list {
  $name: nth($item, 1);
  $color: nth($item, 2);

  .#{$name} {
    color: $color;
  }
  
  .bg-#{$name} {
    background-color: $color;
/*     this will return black text for bright backgrounds and white text for dark backgrounds */
/*     color: if(lightness($color) > 62%, black, white); */
  }
}

$background-color: #3498db;
$brand-blue: #3498db;
$brand-color: $brand-blue;
$font-color: white;
$font-hover-color: darken($font-color, 17%);

$turqoise:      rgba(26, 188, 156,1.0);
$green_sea:     rgba(22, 160, 133,1.0);
$emerald:       rgba(46, 204, 113,1.0);
$nephritis:     rgba(39, 174, 96,1.0);
$peter_river:   rgba(52, 152, 219,1.0);
$belize_hole:   rgba(41, 128, 185,1.0);
$amethyst:      rgba(155, 89, 182,1.0);
$wisteria:      rgba(142, 68, 173,1.0);
$wet_asphalt:   rgba(52, 73, 94,1.0);
$midnight_blue: rgba(44, 62, 80,1.0);
$sun_flower:    rgba(241, 196, 15,1.0);
$orange:        rgba(243, 156, 18,1.0);
$carrot:        rgba(230, 126, 34,1.0);
$pumpkin:       rgba(211, 84, 0,1.0);
$alizarin:      rgba(231, 76, 60,1.0);
$pomegranate:   rgba(192, 57, 43,1.0);
$clouds:        rgba(236, 240, 241,1.0);
$silver:        rgba(189, 195, 199,1.0);
$concrete:      rgba(149, 165, 166,1.0);
$asbestos:      rgba(127, 140, 141,1.0);