
// 自定义class样式

// 1-80(可以等于80)之间的偶数(双数)
// 能被5除尽的1-80之间的数，如5，10，15，35等
// 定义内外边距，历遍1-80
@for $i from 0 through 80 {

    // 能被5除尽的数只要双数和
    @if $i % 2==0 or $i % 5==0 {

        // 得出：ab-margin-30或者ab-m-30
        .ab-margin-#{$i},
        .ab-m-#{$i} {
            margin: $i + px !important;
        }

        // 得出：ab-padding-30或者ab-p-30
        .ab-padding-#{$i},
        .ab-p-#{$i} {
            padding: $i + px !important;
        }

        @each $short,
        $long in l left,
        t top,
        r right,
        b bottom {

            // 缩写版，结果如： ab-m-l-30
            // 定义外边距
            .ab-m-#{$short}-#{$i} {
                margin-#{$long}: $i + px !important;
            }

            // 定义内边距
            .ab-p-#{$short}-#{$i} {
                padding-#{$long}: $i + px !important;
            }

            // 完整版，结果如：ab-margin-left-30
            // 定义外边距
            .ab-margin-#{$long}-#{$i} {
                margin-#{$long}: $i + px !important;
            }

            // 定义内边距
            .ab-padding-#{$long}-#{$i} {
                padding-#{$long}: $i + px !important;
            }
        }
    }
}
// 字体加粗
.ab-font-bold {
    font-weight: 600;
}
// 字体居左
.ab-text-left {
    text-align: left;
}
// 字体居中
.ab-text-center {
    text-align: center;
}
// 字体居右
.ab-text-right {
    text-align: right;
}

/* start--文本行数限制--start */
.ab-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ab-line-2 {
    -webkit-line-clamp: 2;
}

.ab-line-3 {
    -webkit-line-clamp: 3;
}

.ab-line-4 {
    -webkit-line-clamp: 4;
}

.ab-line-5 {
    -webkit-line-clamp: 5;
}

.ab-line-2, .ab-line-3, .ab-line-4, .ab-line-5 {
    overflow: hidden;
	word-break: break-all;
    text-overflow: ellipsis; 
    display: -webkit-box; // 弹性伸缩盒
    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}
/* end--文本行数限制--end */

// 鼠标手指样式
.ab-cursor-pointer:hover{
    cursor: pointer;
}

// 基础边框弧度
.ab-border-radius-base{
    border-radius: 16px;
}
.ab-b-r-base{
    border-radius: 16px;
}