常用Css类之Less篇

测试地址https://www.dute.org/less-to-css

间距

生成padding，margin间距

// 需要的边距尺寸
@values: 5, 10, 12, 15, 20;
// class的key和对应的属性
.enums() {
    pt: padding-top;
    pr: padding-right;
    pb: padding-bottom;
    pl: padding-left;
    mt: margin-top;
    mr: margin-right;
    mb: margin-bottom;
    ml: margin-left;
}
// 遍历生成，比如.pl10{padding-left: 10px;}
each(.enums(), .(@v1, @k1) {
    each(@values, {
        .@{k1}@{value} {
            @{v1}: (@value * 1px);
        }
    }
    )
})

Font Size

根据配置字体数组，生成字体大小

// 生成从10到24的字体大小， 每次递增1
// @sizes: range(10, 24, 1);
// 自定义需要的字体大小
@sizes: 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24;
each(@sizes, {
    .fsize@{value} {
        font-size: @value * 1px
    }
})

Color

常用颜色定义和生成

// 颜色定义
@333: #333;
@666: #666;
@999: #999;
@fff: #fff;
@blue: #2c5cc5;
@org: #ff6c37;
@red: #ea5a5c;
@green: #29b87a;
// 采用的颜色以及对应的色值
@colors: {
    fff: @fff;
    blue: @blue;
    org: @org;
    999: @999;
    666: @666;
    333: @333;
    red: @red;
    green: @green;
}
each(@colors, {
    .fc@{key} {
        color: @value;
    }
})

版本信息

以上依赖的less版本信息为

{
    "less": "4.1.1"
}