.loop(@n, @i:1) when (@i <= @n) {
    @val: unit(@i * 4, px);
    .p-@{i} {
        padding: @val;
    }
    .px-@{i} {
        padding-left: @val;
        padding-right: @val;
    }
    .py-@{i} {
        padding-top: @val;
        padding-bottom: @val;
    }
    .pt-@{i} {
        padding-top: @val;
    }
    .pr-@{i} {
        padding-right: @val;
    }
    .pb-@{i} {
        padding-bottom: @val;
    }
    .pl-@{i} {
        padding-left: @val;
    }

    .m-@{i} {
        margin: @val;
    }
    .mx-@{i} {
        margin-left: @val;
        margin-right: @val;
    }
    .my-@{i} {
        margin-top: @val;
        margin-bottom: @val;
    }
    .mt-@{i} {
        margin-top: @val;
    }
    .mr-@{i} {
        margin-right: @val;
    }
    .mb-@{i} {
        margin-bottom: @val;
    }
    .ml-@{i} {
        margin-left: @val;
    }
    .loop(@n, (@i + 1))
}

// 预设 内外边距
.loop(5);

// 弹性盒
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { 	justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-center { justify-content: center; }
.justify-end { 	justify-content: flex-end; }
.gap-y-2\.5 { row-gap: 10px; }
.gap-x-2\.5 { column-gap: 10px; }

// 宽高
.w-full { width: 100%; }
.w-1\/5 { width: 20%; }
.w-1\/4 { width: 25%; }
.w-1\/3 { width: 33.3%; }
.w-1\/2 { width: 50%; }
.h-full { height: 100%; }

// 字体大小
.text-16 { font-size: 16px; }
.text-12 { font-size: 12px; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-black { color: #000; }
.text-red { color: #FF4D4F; }
.text-primary { color: var(--van-primary-color); }
.font-semibold { font-weight: 600; }
// 文字省略
.text-ellipsis {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

// 换行
.text-wrap {
    // text-wrap: wrap;
    word-break: break-all;
}

// 位置
.relative { position: relative; }

// 下划线
.underline { text-decoration-line: underline; }

// 垂直对齐
.align-middle { vertical-align: middle; }

// 溢出
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }