/** * author: lilinchang * less函数生成flex相关常用类名 */ .flex { display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; flex-wrap: nowrap; } .flex-shrink-0 { -webkit-flex-shrink: 0; flex-shrink: 0; } // 生成justify-content类 开始 @justifyContentNameList: center, start, end, between, around, initial, inherit; @justifyContentList: center, flex-start, flex-end, space-between, space-around, initial, inherit; .justifyContent(@className, @value) { .flex-@{className} { -webkit-justify-content: @value; justify-content: @value; } } .loopJustifyContent(@i) when (@i < length(@justifyContentNameList) + 1 ) { .justifyContent(extract(@justifyContentNameList, @i), extract(@justifyContentList, @i)); .loopJustifyContent(@i+1); } .loopJustifyContent(1); // 生成justify-content类 结束 // 生成align-items,align-self类 开始 @alignNameList: stretch, center, start, end, baseline, initial, inherit; @alignList: stretch, center, flex-start, flex-end, baseline, initial, inherit; .align(@className, @value) { .flex-align-@{className} { -webkit-align-items: @value; align-items: @value; } .flex-self-@{className} { align-self: @value; } } .loopAlign(@i) when (@i < length(@alignNameList) + 1 ) { .align(extract(@alignNameList, @i), extract(@alignList, @i)); .loopAlign(@i+1); } .loopAlign(1); // 生成align-items,align-self类 结束 // 生成direction类 开始 @directionNameList: row, row-reverse, column, column-reverse, direction-initial, direction-inherit; @directionList: row, row-reverse, column, column-reverse, initial, inherit; .direction(@className, @value) { .flex-@{className} { -webkit-flex-direction: @value; flex-direction: @value; } } .loopDirection(@i) when (@i < length(@directionNameList) + 1 ) { .direction(extract(@directionNameList, @i), extract(@directionList, @i)); .loopDirection(@i+1); } .loopDirection(1); // 生成direction类 结束 // 生成wrap类 开始 @wrapNameList: nowrap, wrap, wrap-reverse, wrap-initial, wrap-inherit; @wrapList: nowrap, wrap, wrap-reverse, initial, inherit; .wrap(@className, @value) { .flex-@{className} { flex-wrap: @value; } } .loopWrap(@i) when (@i < length(@wrapNameList) + 1 ) { .wrap(extract(@wrapNameList, @i), extract(@wrapList, @i)); .loopWrap(@i+1); } .loopWrap(1); // 生成wrap类 开始