vue自定义组件（Vue3自定义UI组件库之基础样式变量）

上一篇中创建一个VUE3 + vite 项目，我们在项目开发过程中免不了要制作各种各样的UI组件，为了风格统一，封装一些统一风格的UI组件库是很有必要的，这篇文章主要是贴上我的基础变量样式库。

下图为我的项目文件结构，大家可以按照自己的习惯来。

主要说几点

src下的views文件夹用来放置我主要的封装页面

base：一些基础样式文件

component：我们封装的UI组件页面文件

pages:用来显示和调试UI组件的页面文件

1、先在base文件下建立variables

2、在variables文件下建立基础的样式变量文件base.scss

3、变量样式文件代码如下

// Color Palette
$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;

// Secondary Color
$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;
// used by dark mode
$dark: #1d1d1d !default;

//Border Color
$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;

// Gradient Colors
$gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
$gradient-orange: linear-gradient(to right, #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 $var from 8 through 60 {
  .fonts-#{$var} {
    font-size: $var * 1px
  }
}

// 字号粗细 100~600
@for $var from 1 through 6 {
  .fonts-weight-#{$var} {
    font-weight: $var * 100
  }
}

// 对齐方向
$align: (left:left, right:right, center:center);

@each $key,
$value in $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,
'Helvetica Neue',
Helvetica,
Segoe UI,
Arial,
Roboto,
'PingFang SC',
'miui',
'Hiragino Sans GB',
'Microsoft Yahei',
sans-serif;
$price-integer-font-family: Avenir-Heavy,
PingFang SC,
Helvetica Neue,
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 $i from 1 through $column-count {
  .lis-col-#{$i} {
    grid-column: span $i;
    width: 100%;
    box-sizing: border-box;
  }
}

// xs
@media (min-width: $breakpoint-xs) {
  @for $i from 1 through $column-count {
    .lis-col-xs-#{$i} {
      grid-column: span $i;
    }
  }
}

// sm
@media (min-width: $breakpoint-sm) {
  @for $i from 1 through $column-count {
    .lis-col-sm-#{$i} {
      grid-column: span $i;
    }
  }
}

// md
@media (min-width: $breakpoint-md) {
  @for $i from 1 through $column-count {
    .lis-col-md-#{$i} {
      grid-column: span $i;
    }
  }
}

// lg
@media (min-width: $breakpoint-lg) {
  @for $i from 1 through $column-count {
    .lis-col-lg-#{$i} {
      grid-column: span $i;
    }
  }
}

//阴影
$shadow-color: $black !default;
$elevation-umbra: rgba($shadow-color, .3) !default;

@for $var from 0 through 10 {
  .shadow-#{$var} {
    box-shadow: 0 0 $var * 1px $elevation-umbra;
  }
}

// 内边距 外边距

/*
lis-pt-sm
lis-pb-md
lis-pl-lg
lis-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'));

@function sizeValue($key, $value) {
  @return if($key=='none', 0, $value);
}
@each $key,
$value in $sizes {
  .lis-mx-#{$key} {
    margin: 0 $value;
  }

  .lis-my-#{$key} {
    margin: $value 0;
  }

  //内填充
  .lis-px-#{$key} {
    padding: 0 $value;
  }

  .lis-py-#{$key} {
    padding: $value 0;
  }

}

@each $key,
$value in $sizes {
  .lis-pa-#{$key} {
    padding: $value;
  }
}

@each $key,
$value in $sizes {
  .lis-ma-#{$key} {
    margin: $value;
  }
}

@each $size in $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 $position in $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--sm
lis-radius-md
lis-radius-lg
lis-radius-xs
...
*/

$radius: (xs:2px, sm:3px, md:6px, lg:8px, round:100%);

@each $key,
$value in $radius {
  .lis-radius-#{$key} {
    border-radius: $value;
  }
}

以上就是我现阶段写的样式变量文件，这只是一个基础的，大家可以按照自己的喜好和项目需要自行添加，文笔不好，大家还是直接看代码吧！（后续会持续优化整理，暂时先这样吧，哈哈哈 毕竟只是学习笔记）

页面中使用

<button class="lis-pa-md lis-ma-md">一个按钮</button>

样式中使用

.div{
  color:$white;
  padding:$padding-xs;
  ...
}

注意：我是使用scss