目标1.设计中改变主题颜色，改变整套页面和组件的颜色2.尽量统一后期定义一组颜色变量表改变颜色直接改变表格。3.因为有些颜色经常在语义上使用，所以很容易使用。比如，为什么颜色要语义可变，边框颜色语义可变？在一次修改中实现复用，处处改变，写过程序的人都知道，变量是程序中最大的部分，颜色无非就是一个颜色值。而一个应用程序的颜色变化无非就是所有组件颜色值的变化。当我们改变颜色的语义时，第一个好处是使用，我们更容易感知颜色的有用性。其次，所有使用相同变量的组件都可以共享这个统一的颜色值。后期我们无非就是换一个主题色。当然，我们也可以开放更多的组件颜色变量。当然，我们不能继续手写CSS。我们将使用Sass来编写我们的CSS，因为没有Sass的支持，我们的解决方案将很困难。难点：需要把这个颜色值变量带入所有用到颜色的地方。这是一个令人头疼的问题，尤其是对于第三方库。很明显有些组件和上图不适配，所以强烈推荐使用可换主题色的第三方UI库，自己写的页面基本可以换。这里的前端实现方案是选择可以自定义主题颜色的第三方库，自己写的页面都是使用变量来写颜色。主题色$generalColor{theme:'#2d8cf0'}辅助色辅助色是一种代表色，常用于信息提示，如成功、警告、失败等。这是一套基本不变的色系。$generalColor：（信息：'#2d8cf0'，成功：'#19be6b'，警告：'#ff9900'，错误：'#ed3f14'）；中性色是另一种颜色系统，一旦定义并被用于生活，包括背景和边框、分界线、主标签、子标签、表头，中性色在登陆时通过创建透明度来实现。此外，为了适应深色背景和浅色背景，设置了两组中性色。$generalColor:(title:opacity(#000,85%),primary_text:opacity(#000,65%),secondary_text:opacity(#000,45%),disable:opacity(#000,25%),边框：不透明度（#000,15%），分隔线：不透明度（#000,9%），背景：不透明度（#000,4%），表头：不透明度（#000,2%），title_dark：不透明度（#fff,100%),primary_text_dark:opacity(#fff,85%),secondary_text_dark:opacity(#fff,65%),disable_dark:opacity(#fff,45%),border_dark:opacity(#fff,25%),divider_dark:opacity(#fff,15%),background_dark:不透明度(#fff,9%),tableHeader_dark:不透明度(#fff,4%));变化标准化可以量化，颜色变化反馈如clickcolor,passcolor[GeneralDarkenthepercentageforprimarycolor]比如按钮点击状态的前端实现如下，大致意思就是主题颜色变暗10%。/自定义一组颜色类//语义抽象词$generalColr:(primary:#2d8cf0,lightPrimary:#5cadff,darkPrimary:#2b85e4,info:#2d8cf0,success:#19be6b,warning:#ff9900,error:#ed3f14，危险：#ed3f14，标题：#1c2438，内容：#19be6b，子颜色：#80848f，禁用：#bbbec4，边框：#dddee1，分隔线：#e9eaec，背景：#f8f8f9，白色：#fff，黑色：#000，黄色：黄色，th：#eef1f6);@each$key,$generalColr中的$color{.f_c_#{$key}{color:$color!important;}.bg_c_#{$key}{背景：$color!important;}}所以你可以快速使用这些类
