上一篇中创建一个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