楔子
有经验的前端在新建一个项目的时候,会分析设计图抽离出基础的色系,字体大小,按钮大小,边框边距,辅助类,常用元素等,然后去定制一套属于该项目的基础css类库,便于在后面的页面搭建中更加方便统一。
想法
当然这个并不是我写此初始类库的原因,而是因为现在为了实用快速快发的流程,大多都是在使用脚手架,UI框架来开发项目,虽然大大的提高了我们的开发效率,但是在开发的过程中需要修改它门的样式就会变得很痛苦,另外想使用它门没有的组件时候,又让风格统一化变的困难,所以我打算开发一套自己的css类库(不包含任何JS代码),只提供基础的css类的使用,基于sass,webapck来实现颜色字体等变量的可定制型,需要使用时候只需要填入自己的定制化需求即可打包为属于自己的css类库。
实施
刚写了一点,要过年了,先贴出来一部分
// 初始化样式 * {margin: 0;padding: 0;outline: none;font-weight: normal;list-style:none;text-decoration:none;line-height: 1.5;} //html{font-size:62.5%} img{border:0;vertical-align:middle;max-width: 100%;} // 解决行高下图片间隙问题 // 基础变量配置 $base-size: 1px; // 基础单位,可以写1em,1rem,1rpx,1px根据具体项目需求 (目前只建议写px,其它单位调整完再更新) $spacing-sizes: (0,5,10,15,20,25,30); // 内外边距的大小,单位基于base-size $font-sizes: (0,10,12,13,14,15,16,18,20,24); // 字体大小,单位基于base-size $width-height-sizes:(10,20,30,40,50,60,70,80,90,100); // 宽高大小,宽度单位基于base-size,高度单位px $radius-sizes:(2,3,5,8,10,15,20); // 圆角大小,单位基于base-size $container-width:(1000,1150,1200,1300); // 主题区域宽度,单位px $border-color: #f7f7f7; // 边框颜色 $scrollbar-color:#555555; // 滚动条颜色 $scrollbar-width:5; // 滚动条宽度 // 基础颜色配置 $colors: ( "primary": #409EFF, "success": #67C23A, "warning": #E6A23C, "danger": #F56C6C, "info": #909399, "white": #ffffff, "black": #000000, "dark": #222222, "gray": #666666 ); // 遍历出字体和背景颜色 @each $colorKey, $color in $colors { .text-#{$colorKey} { color: $color; } .bg-#{$colorKey} { background-color: $color; } } // 内外边距前缀 $spacing-types: ( mg: margin, pd: padding ); // 方向上下左右 $spacing-direction: ( t: top, r: right, b: bottom, l: left ); // 遍历出所有内外边距:mgt(num),mgb(num),mgl(num),mgr(num) | pdt(num),pdb(num),pdl(num),pdr(num) @each $typeKey, $type in $spacing-types { @each $dirKey, $dir in $spacing-direction { @each $size in $spacing-sizes { .#{$typeKey}#{$dirKey}#{$size} { #{$type}-#{$dir}: $size * $base-size; } } } } // 遍历出字体:fz(num) @each $size in $font-sizes { .fz#{$size} { font-size: $size * $base-size; } } // 遍历出圆角:radius(num) @each $size in $radius-sizes { .radius#{$size} { border-radius: $size * $base-size; } }; // 遍历宽高行高:w(num),h(num),lh(num) @each $size in $width-height-sizes { .w#{$size} { width: $size * 1%; } .h#{$size} { height: $size * $base-size; } .lh#{$size} { line-height: $size * $base-size; } }; // 边框 $border-type:(solid,dashed); .noborder{border: none;} .noborder::after{border: none;} @each $type in $border-type { .border{border: $base-size $type $border-color;} .border-l{border-left: $base-size $type $border-color;} .border-r{border-right: $base-size $type $border-color;} .border-t{border-top: $base-size $type $border-color;} .border-b{border-bottom: $base-size $type $border-color;} }; // 遍历主体宽度:container(num) @each $size in $container-width { .container#{$size} { width: $size * $base-size; margin: 0 auto; } }; // 通用辅助类 .fl{float: left} .fr{float: right} .fzb{font-weight: bold} .wfull{width: 100%!important;} .list-style-none{list-style:none} .hfull{width: 100%;} .hide{display: none} .block{display: block} .inline{display: inline-block;*display: inline;} .over-hidden{overflow: hidden;} .border-box{box-sizing: border-box;} .box-shadow{box-shadow: 0 2*$base-size 12*$base-size 0 rgba(0,0,0,.1);} .pointer{cursor: pointer;} .clear{*zoom: 1;&:after{content: "";display: block;width: 0;height: 0;clear: both;overflow: hidden}} // 定位类 .fixed{position: fixed;} .relative{position: relative} .absolute{position: absolute;} .mg-auto{margin: 0 auto;} .trans-center{position: absolute;left: 50%;transform: translate(-50%,-50%);} .trans-center-x{position: absolute;left: 50%;transform: translateX(-50%,-50%);} .trans-center-y{position: absolute;top: 50%;transform: translateY(-50%,-50%);} // 文字类 .text-center{text-align: center;} .text-right{text-align: right;} .text-normal{font-weight: normal;font-style: normal;} .text-break{word-break: break-all;} .text-ellipsis{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;} // flex布局 .flex{display: flex} .flex-wrap{display: flex;flex-wrap: wrap} .flex-nowrap{display: flex;flex-wrap: nowrap} .flex-column{display: flex;flex-direction: column} .flex-between{display: flex;justify-content: space-between} .flex-around{display: flex;justify-content: space-around} .flex-center{display: flex;justify-content: center} .flex-shrink{display: flex;flex-shrink: 0;} .justify-end{display: flex;justify-content: flex-end;} .align-center{display: flex;align-items: center} .align-top{display: flex;align-items: flex-start;} .align-bottom{display: flex;align-items: flex-end;} .self-top{display: flex;align-self: flex-start;} .self-bottom{display: flex;align-self: flex-end;} // 自定义滚动条 .scrollbar { &::-webkit-scrollbar { width:$scrollbar-width * $base-size; } &::-webkit-scrollbar-thumb { border-radius:10 * $base-size; background-color:$scrollbar-color; } }
评论前必须登录!
注册