提示:当前为默认节点,你可以在后盾窜改为你想要的站点!
站长资源
中国站长网站

利用scss快速打造属于本人的css类库

楔子

有经历的前端在新建一个项宗旨时候,会分析设计图抽离出基础的色系,字体大小,按钮大小,边框边距,辅助类,常用元素等,然后去定制一套属于该项宗旨基础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;
    }
}

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 利用scss快速打造属于本人的css类库

评论 抢沙发

评论前务必登录!