scss样式常用

/* 遍历 0-1000 */
@for $i from 0 through 1000 {

    // 外边距 margin
    .margin#{$i},
    .m#{$i} {
        margin: $i + px;
    }

    .m-w#{$i} {
        margin-left: $i + px;
        margin-right: $i + px;
    }

    .m-h#{$i} {
        margin-top: $i + px;
        margin-bottom: $i + px;
    }

    // 内边距 padding
    .padding#{$i},
    .p#{$i} {
        padding: $i + px;
    }

    .p-w#{$i} {
        padding-left: $i + px;
        padding-right: $i + px;
    }

    .p-h#{$i} {
        padding-top: $i + px;
        padding-bottom: $i + px;
    }

    @each $short, $long in l left, t top, r right, b bottom {
        .m-#{$short}#{$i} {
            margin-#{$long}: $i + px;
        }

        .p-#{$short}#{$i} {
            padding-#{$long}: $i + px;
        }

        .margin-#{$long}#{$i} {
            margin-#{$long}: $i + px;
        }

        .padding-#{$long}#{$i} {
            padding-#{$long}: $i + px;
        }
    }

    // 边框圆角 border-radius
    .border-radius#{$i},
    .br#{$i} {
        border-radius: $i + px;
    }

    .br-tl#{$i} {
        border-top-left-radius: $i + px;
    }

    .br-tr#{$i} {
        border-top-right-radius: $i + px;
    }

    .br-bl#{$i} {
        border-bottom-left-radius: $i + px;
    }

    .br-br#{$i} {
        border-bottom-right-radius: $i + px;
    }

    // 左边 left
    .left#{$i},
    .l#{$i} {
        left: $i + px;
    }

    // 左边 right
    .right#{$i},
    .r#{$i} {
        right: $i + px;
    }

    // 头皮 top
    .top#{$i},
    .t#{$i} {
        top: $i + px;
    }

    // 左边 bottom
    .bottom#{$i},
    .b#{$i} {
        bottom: $i + px;
    }

    // 宽度 width
    .width#{$i},
    .w#{$i} {
        width: $i + px;
    }

    // 高度 height
    .height#{$i},
    .h#{$i} {
        height: $i + px;
    }

    @if $i <=100 {

        // 宽度百分比 width
        .width-p#{$i},
        .w-p#{$i} {
            width: $i * 1%;
        }

        // 高度百分比 height
        .height-p#{$i},
        .h-p#{$i} {
            height: $i * 1%;
        }
    }

    @if $i < 75 {

        // 文本间距
        .sp#{$i} {
            text-indent: $i + px;
            letter-spacing: $i + px;
        }

        // 字体大小 font-size
        .font-size#{$i},
        .fs#{$i} {
            font-size: $i + px;
        }
    }

    // 文本超出隐藏
    @if $i <=10 {
        @if $i ==1 {
            .t-hide#{$i} {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        @else {
            .t-hide#{$i} {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: $i;
                -webkit-box-orient: vertical;
            }
        }
    }
}

/* 页面设置背景色 */
.bg-page {
    height: 100%;
    background-color: #F0F2F5;
}

/* 文字换行 */
.break {
    word-break: break-all;
}

/* 字体加粗 font-weight  */
.bold {
    font-weight: bold;
}

/* 字体对齐 text-aligin  */
.ta {
    &-l {
        text-align: left;
    }

    &-c {
        text-align: center;
    }

    &-r {
        text-align: right;
    }
}

/* 页面布局 flex */
@mixin flex {
    display: flex;
}

@mixin flex-a {
    @include flex;
    align-items: center;
}

.flex {
    @include flex;

    &-1 {
        flex: 1;
    }

    &-wrap {
        @include flex;
        flex-wrap: wrap;
    }

    &-row {
        @include flex;
        flex-direction: row;
    }

    &-col {
        @include flex;
        flex-direction: column;
    }

    &-aifs {
        @include flex;
        align-items: flex-start;
    }

    &-aic {
        @include flex;
        align-items: center;
    }

    &-aife {
        @include flex;
        align-items: flex-end;
    }

    &-jcfs {
        @include flex;
        justify-content: flex-start;
    }

    &-jcc {
        @include flex;
        justify-content: center;
    }

    &-jcfe {
        @include flex;
        justify-content: flex-end;
    }

    &-jcsa {
        @include flex;
        justify-content: space-around;
    }

    &-jcsb {
        @include flex;
        justify-content: space-between;
    }

    &-ac-fs {
        @include flex-a;
        justify-content: flex-start;
    }

    &-ac-c {
        @include flex-a;
        justify-content: center;
    }

    &-ac-fe {
        @include flex-a;
        justify-content: flex-end;
    }

    &-ac-sa {
        @include flex-a;
        justify-content: space-around;
    }

    &-ac-sb {
        @include flex-a;
        justify-content: space-between;
    }
}

/* 鼠标小手 */
.mouse {
    cursor: default;

    &-p {
        cursor: pointer;
    }
}

/* 楷体 */
.kt {
    font-family: '楷体', 'KaiTi', '楷体_GB2312', '楷体_GBK', sans-serif;
}

/* 定位 */
.pst {
    &-r {
        position: relative;
    }

    &-a {
        position: absolute;
    }

    &-f {
        position: fixed;
    }
}

/* 颜色 */
$colors: (
    primary: #4d80f0,
    success: #34d19d,
    warning: #f0883a,
    error: #fa4350,
    info: #9c9c9c,

    red-def: #e83a30,
    red-dark: #ba2e26,
    red-light: #fad8d6,
    red-disabled: #f39c97,

    purplered-def: #e72f8c,
    purplered-dark: #b9266f,
    purplered-light: #fad5e8,
    purplered-disabled: #f397c5,

    purple-def: #892fe8,
    purple-dark: #6e26ba,
    purple-light: #e7d5fa,
    purple-disabled: #c497f3,

    bluepurple-def: #5f4fd9,
    bluepurple-dark: #4c3fae,
    bluepurple-light: #dfdcf7,
    bluepurple-disabled: #afa7ec,

    aquablue-def: #3646ff,
    aquablue-dark: #2b38cc,
    aquablue-light: #d7daff,
    aquablue-disabled: #9aa2ff,

    blue-def: #3d7eff,
    blue-dark: #3165cc,
    blue-light: #d8e5ff,
    blue-disabled: #9ebeff,

    indigo-def: #31c9e8,
    indigo-dark: #27a1ba,
    indigo-light: #d6f4fa,
    indigo-disabled: #98e4f3,

    cyan-def: #2de8bd,
    cyan-dark: #24ba97,
    cyan-light: #d5faf2,
    cyan-disabled: #96f3de,

    teal-def: #24f083,
    teal-dark: #1dc069,
    teal-light: #d3fce6,
    teal-disabled: #91f7c1,

    green-def: #31e749,
    green-dark: #27b93a,
    green-light: #d6fadb,
    green-disabled: #98f3a4,

    yellowgreen-def: #a4e82f,
    yellowgreen-dark: #82ba26,
    yellowgreen-light: #edfad5,
    yellowgreen-disabled: #d1f397,

    lime-def: #d5eb00,
    lime-dark: #aabc00,
    lime-light: #f7fbcc,
    lime-disabled: #e9f57f,

    yellow-def: #fff420,
    yellow-dark: #ccc21a,
    yellow-light: #fffdd2,
    yellow-disabled: #fff88f,

    orangeyellow-def: #ffca28,
    orangeyellow-dark: #cca220,
    orangeyellow-light: #fff4d4,
    orangeyellow-disabled: #ffe493,

    orange-def: #ffa726,
    orange-dark: #cc851e,
    orange-light: #ffedd4,
    orange-disabled: #ffd392,

    orangered-def: #ff7043,
    orangered-dark: #cc5a36,
    orangered-light: #ffe2d9,
    orangered-disabled: #ffb7a1,

    brown-def: #914f2c,
    brown-dark: #743f23,
    brown-light: #e9dcd5,
    brown-disabled: #c8a795,

    gery-def: #78909c,
    gery-dark: #5f7e8b,
    gery-light: #e4e9ec,
    gery-disabled: #c6d1d8,

    gray-def: #aaaaaa,
    gray-dark: #838383,
    gray-light: #f8f7f8,
    gray-disabled: #e6e6e6,

    white-def: #ffffff,
);

@each $name, $color in $colors {

    /* 字体颜色 color */
    .c-#{$name} {
        color: $color;
    }

    /* 背景颜色 background-color */
    .bg-#{$name} {
        background-color: $color;
    }

}

/* 动画效果 */
.fadeIn {
    animation: fadeIn 1s ease forwards;

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.1);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

.slideDown {
    animation: slideDown 1s ease forwards;

    @keyframes slideDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.slideUp {
    animation: slideUp 1s ease forwards;

    @keyframes slideUp {
        from {
            opacity: 1;
            transform: translateY(0);

        }

        to {
            transform: translateY(-100%);
            opacity: 0;
        }
    }
}
posted @ 2024-12-10 15:32  世界险恶你要内心强大  阅读(24)  评论(0)    收藏  举报