CSS自己封装的样式库

_variable.scss

/* 媒体查询 */
$decktop: 1200px;
$laptop: 1024px;
$tablet: 768px;
$phone: 480px;

/* 主题状态颜色 */
$theme: #7957d5;
$success: #67c23a;
$waring: #e6a23c;
$danger: #f56c6c;
$info: #909399;
$light:hsl(0, 0%, 96%);//浅色
$dark:hsl(0, 0%, 21%);//深色

/* 基础颜色 */
$black:#000000;
$white:#FFFFFF;
$transparent:transparent;

/* 文字颜色 */
$fc-1:#303133;//主要文字
$fc-2:#606266;//常规文字
$fc-3:#909399;//次要文字
$fc-4:#C0C4CC;//占位文字

/* 边框颜色 */
$bc-1:#DCDFE6;//一级边框
$bc-2:#E4E7ED;//二级边框
$bc-3:#EBEEF5;//三级边框
$bc-4:#F2F6FC;//四级边框

/* 字体大小 */
$fs-12: 12px;
$fs-14: 14px;
$fs-16: 16px;
$fs-18: 18px;
$fs-20: 20px;
$fs-22: 22px;
$fs-24: 24px;
$fs-26: 26px;
$fs-28: 28px;

reset.scss

@import "./variable";

/* 重置样式 */
* {
    padding: 0;
    margin: 0;
    line-height: 1;
}

html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
button {
    border: 0;
}
a {
    text-decoration: none;
    font-size: 16px;
    color: #333333;
    font-weight: 500;
}
ul,
li,
ol {
    list-style: none;
}
textarea,
input {
    width: 100%;
    height: 100%;
    border: 0;
    resize: none;
    outline: none;
}

::-webkit-scrollbar {
    display: none;
}
/* 重置样式end */

/* 自定义类名 */

/* 一行文字换行和字体溢出隐藏 */
.One-line-hide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 多行（定义行）文字和字体溢出隐藏 */
.Multi-line-hide {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* 鼠标悬停显示隐藏省略文字 */
.hoverShow {
    text-overflow: inherit;
    overflow: visible;
    white-space: nowrap;
}
/* 字体删除线 */
.Strikethrough {
    text-decoration: line-through;
}
/* 字体首位大写*/
.toFirstCapital {
    text-transform: capitalize;
}

/* 字体大写*/
.toFirstCapital {
    text-transform: uppercase;
}

/* 字体小写*/
.toCapital {
    text-transform: lowercase;
}

/* iconfont */
.iconfont {
    cursor: pointer;
}
.iconfont:hover {
    color: $theme;
}
/* 主题状态颜色 */
.theme {
    color: $theme;
}
.success {
    color: $success;
}
.waring {
    color: $waring;
}
.danger {
    color: $danger;
}
.info {
    color: $info;
}
.light {
    color: $light;
}
.dark {
    color: $dark;
}

/* 基础颜色 */
.black {
    color: $black;
}
.white {
    color: $white;
}
.transparent {
    color: $transparent;
}

/* 文字颜色 */
.fc-1 {
    color: $fc-1;
}
.fc-2 {
    color: $fc-2;
}
.fc-3 {
    color: $fc-3;
}
.fc-4 {
    color: $fc-4;
}

/* 边框颜色 */
.bc-1 {
    color: $bc-1;
}
.bc-2 {
    color: $bc-2;
}
.bc-3 {
    color: $bc-3;
}
.bc-4 {
    color: $bc-4;
}

/* 字体大小 */
.fs-12 {
    font-size: $fs-12;
}
.fs-14 {
    font-size: $fs-14;
}
.fs-16 {
    font-size: $fs-16;
}
.fs-18 {
    font-size: $fs-18;
}
.fs-20 {
    font-size: $fs-20;
}
.fs-22 {
    font-size: $fs-22;
}
.fs-24 {
    font-size: $fs-24;
}
.fs-26 {
    font-size: $fs-26;
}
.fs-28 {
    font-size: $fs-28;
}

/* 弹性布局 */
.is-flex {
    display: flex;
}
/* Flex direction */
.flex-direction-row {
    flex-direction: row;
}
.flex-direction-row-reverse {
    flex-direction: row-reverse;
}
.flex-direction-column {
    flex-direction: column;
}
.flex-direction-column-reverse {
    flex-direction: column-reverse;
}

/* Flex wrap */
.flex-wrap-nowrap {
    flex-wrap: nowrap;
}
.flex-wrap-wrap {
    flex-wrap: wrap;
}
.flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Justify content */
.justify-content-flex-start {
    justify-content: flex-start;
}
.justify-content-flex-end {
    justify-content: flex-end;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-space-between {
    justify-content: space-between;
}
.justify-content-space-around {
    justify-content: space-around;
}
.justify-content-space-evenly {
    justify-content: space-evenly;
}
.justify-content-start {
    justify-content: start
}
.justify-content-end{
    justify-content: end
}
.justify-content-left {
    justify-content: left
}
.justify-content-right {
    justify-content: right
}

/* Align content */
.align-content-flex-start {
    align-content: flex-start;
}
.align-content-flex-end {
    align-content: flex-end
}
.align-content-center {
    align-content: center
}
.align-content-space-between {
    align-content: space-between
}
.align-content-space-around {
    align-content: space-around
}
.align-content-space-evenly {
    align-content: space-evenly
}
.align-content-stretch {
    align-content: stretch
}
.align-content-start {
    align-content: start
}
.align-content-end{
    align-content: end
}
.align-content-baseline{
    align-content: baseline
}

/* Align items */
.align-items-stretch{
    align-items: stretch
}
.align-items-flex-start{
    align-items: flex-start
}
.align-items-flex-end{
    align-items: flex-end
}
.align-items-center{
    align-items: center
}
.align-items-baseline{
    align-items: baseline
}
.align-items-start{
    align-items: start
}
.align-items-end{
    align-items: end
}
.align-items-self-start{
    align-items: self-start
}
.align-items-stretch{
    align-items: self-end
}

/* Align self */
.align-self-auto{
    align-self: auto
}
.align-self-flex-start{
    align-self: flex-start
}
.align-self-flex-end{
    align-self: flex-end
}
.align-self-center{
    align-self: center
}
.align-self-baseline{
    align-self: baseline
}
.align-self-stretch{
    align-self: stretch
}
/* flex-1 */
.flex-1{
    flex: 1;
}

/* 自定义原生input-type：file上传图片，隐藏原生上传图标 */
.uploadImg {
    position: relative;
    .uploadImgInput {
        cursor: pointer !important;
        width: 1.46rem;
        height: 100%;
        z-index: 10000;
        opacity: 0;
        position: absolute;
        left: 0;
    }
}

/* 页面统一样式自定义 */
.wrap {
    width: 100vw;
    height: 100vh;
    background-color: rgba(230, 230, 230, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbars {
    width: 100%;
    background-image: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
}

/* 自定义类名end */

@media screen and (max-width: $tablet) {
    textarea {
        font-size: $fs-14;
    }

    .iconfont {
        font-size: $fs-18;
    }
    .navbars {
        height: 38px;
    }
}

@media screen and (min-width: $tablet) {
    textarea {
        font-size: $fs-18;
    }

    .iconfont {
        font-size: $fs-22;
    }
    .navbars {
        height: 48px;
    }
}