$text: #333333;
$text-sub: #666666;
$text-third: #999999;
$text-active: #1678ff;
$text-red: #ea4e3d;
$text-green: #1EC77A;
$text-orange: #FF9F39;

$page: #f5f5f5;
$area: #ffffff;
$area-l: #f5f5f5;
$select: #f5f5f5;
$dialog: #ffffff;
$green: #1EC77A;
$orange: #FF9F39;
$mask: rgba(0, 0, 0, 0.3);
$image: rgba(0, 0, 0, 0.3);
$image-lg: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
$gold-lg: linear-gradient(to right, #e9cfc9, #f6e2dd);

// mixin/color.scss
$border: #dddddd;
$active: #1678ff;
$active-lg: linear-gradient(to right, #1678ff, #abbaf0);
$cancel: #e0e0e0;
$confirm: #1678ff;
// mixin/color.scss

$names-c: text, text-sub, text-active, text-red, text-third, text-green, text-orange;
$colors-c: $text, $text-sub, $text-active, $text-red, $text-third, $text-green, $text-orange;

$names-bgc: page, area, area-l, select, dialog, mask, image, active, green, orange;
$colors-bgc: $page, $area, $area-l, $select, $dialog, $mask, $image, $active, $green, $orange;

$names-lg: image-lg, gold-lg;
$colors-lg: $image-lg, $gold-lg;

.se {
  &-c {
    @each $name in $names-c {
      $i: index($names-c, $name);
      &-#{$name} {
        color: nth($colors-c, $i);
      }
    }
  }

  &-bgc {
    @each $name in $names-bgc {
      $i: index($names-bgc, $name);
      &-#{$name} {
        background-color: nth($colors-bgc, $i);
      }
    }

    @each $name in $names-lg {
      $i: index($names-lg, $name);
      &-#{$name} {
        background-image: nth($colors-lg, $i);
      }
    }
  }
}