less汇总

// 基础间距
@space: 8px;
@space2: 16px;
@space3: 24px;
@space4: 32px;
@space5: 40px;
@space6: 48px;

// 文字大小
@size10: 10px;
@size12: 12px;
@size14: 14px;
@size16: 16px;
@size18: 18px;
@size24: 24px;
@size30: 30px;

// location
@center: center;
@spacebetween: space-between;
@row: row;
@column: column;
@bottom: bottom;
@top: top;
@left: left;
@right: right;

// other
@hidden: hidden;
@auto: auto;
@baseline: baseline;
@none: none;
@middle: middle;
@normal: normal;

// text
.text-align(@type: @center) {
    text-align: @type;
}

.f-size(@size: @size14) {
    font-size: @size;
}

.f-va(@type: @middle) {
    vertical-align: @type;
}

.f-float(@float) {
    float: @float;
}

//多行文本省略隐藏
.moreEllipsis(@lineclamp) {
    .f-ofh;
    text-overflow: ellipsis;
    .f-display(-webkit-box);
    -webkit-line-clamp: @lineclamp;
    -webkit-box-orient: vertical;
}

// 间距
.f-ms(@locat: @top, @size) {
    margin-@{locat}: @size;
}

.f-mlr(@marginlr) {
    margin: 0 @marginlr;
}

.f-ps(@locat: @top, @size) {
    padding-@{locat}: @size;
}

.f-p(@padding) {
    padding: @padding;
}

.f-plr(@paddinglr) {
    padding: 0 @paddinglr;
}

// 颜色
.color(@color) {
    color: @color;
}

.bgc(@color) {
    background-color: @color;
}

.l-height(@size) {
    line-height: @size;
}

.f-hlh(@size) {
    height: @size;
    line-height: @size;
}
// 边框
.border-radius(@size) {
    border-radius: @size;
}

.border(@width: 1px, @style: solid, @color) {
    border: @width @style @color;
}
.border-location(@locat: @bottom, @width: 1px, @style: solid, @color) {
    border-@{locat}: @width @style @color;
}

// 宽高
.width(@size){
    width: @size;
}

.height(@size){
    height: @size;
}

.wheight(@w,@h){
    width: @w;
    height: @h;
}

.min-width(@size){
    min-width: @size;
}

.min-height(@size){
    min-height: @size;
}

.min-wheight(@w,@h){
    min-width: @w;
    min-height: @h;
}

.max-width(@size){
    max-width: @size;
}

.max-height(@size){
    max-height: @size;
}

.max-wheight(@w,@h){
    max-width: @w;
    max-height: @h;
}
// flex布局
.f-display(@display: flex) {
    display: @display;
}
.flex-num(@num){
    flex: @num;
}
.justify-content(@type: @center) {
    justify-content: @type;
}

.flex-center(@justify: @center, @align: @center) {
    display: flex;
    justify-content: @justify;
    align-items: @align;
}

.flex(@direction: @row, @wrap: nowrap, @align: @center, @justify: @spacebetween) {
    display: flex;
    flex-direction: @direction;
    flex-wrap: @wrap;
    align-items: @align;
    justify-content: @justify;
}
// 其它
.opacity(@num: 1){
    opacity: @num;
}

.ofw-direction(@direction: x, @type: @hidden){
    overflow-@{direction}: @type;
}

.f-cursor(@cursor: pointer){
    cursor: @cursor;
}

.f-position(@position: absolute) {
    position: @position;
}

.blur(@size: 30px) {
    -webkit-filter: blur(@size);
    /* Chrome, Opera */
    -moz-filter: blur(@size);
    -ms-filter: blur(@size);
    filter: blur(@size);
}

# color用法
## 基础颜色
```less
@gray: #444;

.color(@color) {
    color: @color;
}
// 用法
.box {
    .color(@gray)
}
// 等同于
.box {
   color: #444;
}
```
## 背景颜色
```less
.bgc(@color) {
    background-color: @color;
}
// 用法
.box {
    .bgc(@gray)
}
// 等同于
.box {
    background-color: #444;
}
```
# border
## 注意：默认宽度是1px，style样式默认是solid，颜色需要自己定义
### 用法解析
```less
.border(@width: 1px, @style: solid, @color) {
    border: @width @style @color;
}
```
#### 用法（宽度自定义、颜色自定义）
```less
.box {
    .border(@width: 9px, @color: pink);
}
// 等同于
.box {
    border: 9px solid pink;
}
```
#### 用法（颜色自定义）
```less
.box {
    .border(@color: pink);
}
// 等同于
.box {
    border: 1px solid pink;
}
```
#### 宽度、样式、颜色自定义
```less
.box {
    .border(6px, dashed,red);
}
// 等同于
.box {
    border: 6px dashed red;
}
```
# border(left、right、top、bottom)方向
## 注意：默认是bottom，默认宽度是1px，style样式默认是solid，颜色需要自己定义
### 用法解析
```less
// location
@top: top;

.border-location(@locat: @top, @width: 1px, @style: solid, @color) {
    border-@{locat}: @width @style @color;
}
```
#### 用法（方向、颜色自定义）
```less
.box {
    .border-location(@locat: bottom, @color: red);
}
// 等同于
.box {
    border-bottom: 1px solid red;
}
```
#### 用法（方向、宽度、样式、颜色自定义）
```less
.box {
    .border-location(bottom, 6px, dashed, red);
}
// 等同于
.box {
    border-bottom: 6px dashed red;
}
```

# 基础间距用法
## 注意：margin、padding的用法
### 用法解析
```less
// 基础间距
@space: 8px;
@space2: 16px;
@space3: 24px;
@space4: 32px;
@space5: 40px;
@space6: 48px;

// location
@top: top;
@left: left;
```
#### 默认方向是margin-top，大小自定义
```less
.f-ms(@locat: @top, @size) {
    margin-@{locat}: @size;
}
```
#### 用法（大小自定义）
```less
.box {
    .f-ms(@size: @space2);
}
// 等同于
.box {
    margin-top: 16px;
}
```
#### 用法（方向、大小自定义）
```less
.box {
    .f-ms(@left, 40px);
}
// 等同于
.box {
    margin-left: 40px;
}
```
### 如遇到需要加!importat的情况
```less
.f-ms(@locat: @top, @size) {
    margin-@{locat}: @size !important;
}

// 用法（大小自定义）
.box {
    .f-ms(@size: 40px);
}
// 等同于
.box {
    margin-top: 40px !important;
}
// padding同样用法
```