颜色规范构思（Scss版）

什么是基础颜色？ 

基础颜色是项目所有颜色的一个抽象颜色，本身并不代表任何意义，相当于UI人员的取色版，也相当于UI人员与前端人员对于颜色的基础规范。

base.scss

/**
 * 基础样式变量
 */


/*--- 蓝色系 ---*/
$color-blue-1000: #051A2F;
$color-blue-900: #082747;
$color-blue-800: #0E4277;
$color-blue-700: #104F8E;
$color-blue-600: #1565B6 ;
$color-blue-500: #0287FF;
$color-blue-400: #5BB1FF;
$color-blue-300: #D2E8FF;
$color-blue-200: #E8F4FF;
$color-blue-100: #F3F9FF;

/*--- 绿色系 ---*/
$color-green-800: #136129;
$color-green-700: #1D9740;
$color-green-600: #22AD4A;
$color-green-500: #2AD85C;
$color-green-400: #5FE285;
$color-green-300: #95ECAE;
$color-green-200: #D4F7DE;
$color-green-100: #EAFBEF;

/*--- 黄色系 ---*/
$color-yellow-800: #735400;
$color-yellow-700: #B38200;
$color-yellow-600: #CC9500;
$color-yellow-500: #FFBA00;
$color-yellow-400: #FFCB40;
$color-yellow-300: #FFDD80;
$color-yellow-200: #FFF1CC;
$color-yellow-100: #FFF8E6;

/*--- 红色系 ---*/
$color-red-800: #6E3131;
$color-red-700: #AC4C4C;
$color-red-600: #C45656;
$color-red-500: #F56C6C;
$color-red-400: #F89191;
$color-red-300: #FAB6B6;
$color-red-200: #FDE2E2;
$color-red-100: #FEF0F0;

/*--- 黑色系 ---*/
$color-black-1000: #333333;
$color-black-900: #626262;
$color-black-950: #999999;
$color-black-800: #6F87A7;
$color-black-700: #C3C6CC;
$color-black-600: #E4E5E9;
$color-black-500: #EBEEF5;
$color-black-400: rgba(20, 140, 252, .13);
$color-black-300: #F5F5F5;
$color-black-200: #F6F8FA;
$color-black-100: #F0F4FA;

通用样式 

对可通用的颜色进行提取。

 general.scss

@import "base";

// 通用分割线颜色
$split-line-color: $color-black-300;

基于通用样式组件

table.scss

@import "general";

.we-table {
  .table-row {
    .split-line {
      background: $split-line-color;
    }
  }
}

其他组件相关样式

button.scss

@import './base';

// 按钮样式
.we-button {
  --font-color: $color-black-1000;
  --border-color: #{$color-black-1000};
  // 主色按钮
  &.we-button--primary {
    --font-color: #{$color-blue-500};
    --border-color: #{$color-blue-500};
  }

  // 警告色按钮
  &.we-button--warning {
    --font-color: #{$color-yellow-500};
    --border-color: #{$color-yellow-500};
  }

  color: var(--font-color);
  border: 1px solid var(--border-color);
}

总结

这种模式考虑的是，当产品稳定后，后续调整样式时，只需更改基础样式即可。