上一篇中创建一个VUE3+vite项目，我们在项目开发过程中免不了要制作各种各样的UI组件，为了风格统一，封装一些统一风格的UI组件库是很有必要的，这篇文章主要是贴上我的基础变量样式库。
下图为我的项目文件结构，大家可以按照自己的习惯来。
主要说几点
src下的views文件夹用来放置我主要的封装页面
base：一些基础样式文件
component：我们封装的UI组件页面文件
pages:用来显示和调试UI组件的页面文件
1、先在base文件下建立variables
2、在variables文件下建立基础的样式变量文件base.scss
3、变量样式文件代码如下
//ColorPalette$black:#000000;$white:#ffffff;$gray-1:#f7f8fa;$gray-2:#f2f3f5;$gray-3:#ebedf0;$gray-4:#dcdee0;$gray-5:#c8c9cc;$gray-6:#969799;$gray-7:#646566;$gray-8:#323233;//SecondaryColor$primary:#1989fa!default;$primary-light-1:#53a8ff;$primary-light-2:#66b1ff;$primary-light-3:#79bbff;$primary-light-4:#8cc5ff;$primary-light-5:#a0cfff;$primary-light-6:#b3d8ff;$primary-light-7:#c6e2ff;$primary-light-8:#d9ecff;$primary-light-9:#ecf5ff;$success:#67C23A!default;$success-light:#e1f3d8!default;$success-lighter:#f0f9eb!default;$warning:#E6A23C!default;$warning:#e6a23c!default;$warning-light:#faecd8!default;$warning-lighter:#fdf6ec!default;$danger:#F56C6C!default;$danger-light:#fde2e2!default;$danger-lighter:#fef0f0!default;$info:#909399!default;$info-light:#e9e9eb!default;$info-lighter:#f4f4f5!default;//usedbydarkmode$dark:#1d1d1d!default;//BorderColor$border-base:#DCDFE6!default;$border-light:#E4E7ED!default;$border-lighter:#EBEEF5!default;$border-extra-light:#F2F6FC!default;//border$border- width-base:1px;//radius$border-radius-xs:2px;$border-radius-sm:4px;$border-radius-md:6px;$border-radius-lg:8px;$border-radius-round:999px;$border-radius-circle:50%;$dimmed-background:rgba(0,0,0,.4)!default;$light-dimmed-background:rgba(255,255,255,.6)!default;$separator-color:rgba(0,0,0,.12)!default;$separator-dark-color:rgba(255,255,255,.28)!default;//GradientColors$gradient-red:linear-gradient(toright,#ff6034,#ee0a24);$gradient-orange:linear-gradient(toright,#ffd01e,#ff8917);//Padding$padding-base:2px;$padding-xs:$padding-base*2;$padding-sm:$padding-base*4;$padding-md:$padding-base*5;$padding-lg:$padding-base*8;$padding-xl:$padding-base*10;//Font//Font-base$font-base:2px;$font-xs:$font-base*6;$font-sm:$font-base*7;$font-md:$font-base*8;$font-lg:$font-base*10;$font-xl:$font-base*12;//字号大小8px~60px@for$varfrom8through60{.fonts-#{$var}{font-size:$var*1px}}//字号粗细100~600@for$varfrom1through6{.fonts-weight-#{$var}{font-weight:$var*100}}//对齐方向$align:(left:left,right:right,center:center);@each$key,$valuein$align{.text-#{$key}{text-align:$value;}}//$line-height-xs:14px;$line-height-sm:18px;$line-height-md:20px;$line-height-lg:22px;$base-font-family:-apple-system,BlinkMacSystemFont,'HelveticaNeue',Helvetica,SegoeUI,Arial,Roboto,'PingFangSC','miui','HiraginoSansGB','MicrosoftYahei',sans-serif;$price-integer-font-family:Avenir-Heavy,PingFangSC,HelveticaNeue,Arial,sans-serif;//Animation$animation-duration-base:0.3s;$animation-duration-fast:0.2s;$animation-timing-function-enter:ease-out;$animation-timing-function-leave:ease-in;//断点宽度$breakpoint-xs:599px!default;$breakpoint-sm:1023px!default;$breakpoint-md:1439px!default;$breakpoint-lg:1919px!default;//z-index$z-fab:990!default;$z-side:1000!default;$z-marginals:2000!default;$z-fixed-drawer:3000!default;$z-fullscreen:6000!default;$z-menu:6000!default;$z-top:7000!default;$z-tooltip:9000!default;$z-notify:9500!default;$z-max:9998!default;//栅格//网格数$column-count:24;//设置网格DIV.lis-row{flex-wrap:wrap;position:relative;box-sizing:border-box;}//每个列的占比@for$ifrom1through$column-count{.lis-col-#{$i}{grid-column:span$i; width:100%;box-sizing:border-box;}}//xs@media(min- width:$breakpoint-xs){@for$ifrom1through$column-count{.lis-col-xs-#{$i}{grid-column:span$i;}}}//sm@media(min- width:$breakpoint-sm){@for$ifrom1through$column-count{.lis-col-sm-#{$i}{grid-column:span$i;}}}//md@media(min- width:$breakpoint-md){@for$ifrom1through$column-count{.lis-col-md-#{$i}{grid-column:span$i;}}}//lg@media(min- width:$breakpoint-lg){@for$ifrom1through$column-count{.lis-col-lg-#{$i}{grid-column:span$i;}}}//阴影$shadow-color:$black!default;$elevation-umbra:rgba($shadow-color,.3)!default;@for$varfrom0through10{.shadow-#{$var}{box-shadow:00$var*1px$elevation-umbra;}}//内边距外边距/*lis-pt-smlis-pb-mdlis-pl-lglis-pr-xs...*/$prefix:'lis';$separator:'-';$marginKey:'m';$paddingKey:'p';$sizes:(('none',0),('xxs',0.125rem),('xs',0.25rem),('sm',0.5rem),('md',1rem),('lg',2rem),('xl',4rem),('xxl',8rem),);$positions:(('t','top'),('r','right'),('b','bottom'),('l','left'));@functionsizeValue($key,$value){@returnif($key=='none',0,$value);}@each$key,$valuein$sizes{.lis-mx-#{$key}{margin:0$value;}.lis-my-#{$key}{margin:$value0;}//内填充.lis-px-#{$key}{padding:0$value;}.lis-py-#{$key}{padding:$value0;}}@each$key,$valuein$sizes{.lis-pa-#{$key}{padding:$value;}}@each$key,$valuein$sizes{.lis-ma-#{$key}{margin:$value;}}@each$sizein$sizes{$sizeKey:nth($size,1);$sizeValue:nth($size,2);.#{$prefix}#{$separator}#{$marginKey}#{$sizeKey}{margin:sizeValue($sizeKey,$sizeValue);}.#{$prefix}#{$separator}#{$paddingKey}#{$sizeKey}{padding:sizeValue($sizeKey,$sizeValue);}@each$positionin$positions{$posKey:nth($position,1);$posValue:nth($position,2);.#{$prefix}#{$separator}#{$marginKey}#{$posKey}#{$separator}#{$sizeKey}{margin-#{$posValue}:sizeValue($sizeKey,$sizeValue);}.#{$prefix}#{$separator}#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey}{padding-#{$posValue}:sizeValue($sizeKey,$sizeValue);}}}//圆角/*lis-radius--smlis-radius-mdlis-radius-lglis-radius-xs...*/$radius:(xs:2px,sm:3px,md:6px,lg:8px,round:100%);@each$key,$valuein$radius{.lis-radius-#{$key}{border-radius:$value;}}以上就是我现阶段写的样式变量文件，这只是一个基础的，大家可以按照自己的喜好和项目需要自行添加，文笔不好，大家还是直接看代码吧！（后续会持续优化整理，暂时先这样吧，哈哈哈毕竟只是学习笔记）
页面中使用
<buttonclass="lis-pa-mdlis-ma-md">一个按钮</button>
样式中使用
.div{color:$white;padding:$padding-xs;...}注意：我是使用scss