.flex {
    display: flex;

    &.items-center {
        align-items: center;
    }

    &.justify-between {
        justify-content: space-between;
    }

    &.justify-center {
        justify-content: center;
    }

    &.wrap {
        flex-wrap: wrap;
    }

    &.direction-column {
        flex-direction: column;
    }
}

.flex-shrink-0{
    flex-shrink: 0;
}

// 设置基础单位
@unit: 4px;

// 循环生成
.generate(@i) when (@i <= 10) {
    .mr-@{i} {
        margin-right: (@unit * @i);
    }
    .ml-@{i} {
        margin-left: (@unit * @i);
    }
    .mt-@{i} {
        margin-top: (@unit * @i);
    }
    .mb-@{i} {
        margin-bottom: (@unit * @i);
    }

    .line-clamp-@{i} {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: @i;
        -webkit-line-clamp: @i;
    }

    .generate(@i + 1); // 递归调用

    .w-@{i}{
        width: @unit * @i;
    }
}

// 启动生成
.generate(1);

.break-words {
    line-break: anywhere;
}
.whitespace-normal {
    white-space: initial;
}

.font-bold {
    font-weight: bold;
}

.cursor-pointer{
    cursor: pointer;
}

.w-full{
    width: 100%;
}