less使用

• 把一些需要统一的样式写到mixin.less中，利用混入特性共用。设计时将需要chong’du的样式摘取出来。以下一些示例：

// 字体
.font(@size, @color){
  font-size: @size;
	color: @color;
}

// 宽高 
.wh(@width, @height, @color){
	width: @width;
	height: @height;
  color: @color
}

• 对于功能性的css可以提前封装好，然后去用，比如居中，布局等

// flex布局
.flex_layout(@type: space-between){
	display: flex;
	justify-content: @type;
}

// Tdesign命名非常清楚
.horizontal-vertical-center-with-flex() {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 有宽高的盒子上下左右居中
.center(@width, @height) {  
	position: absolute;
	top: 50%;
    left: 50%;
    margin-top: -@height/2;
    margin-left: -@width/2;
}

// 无宽高盒子上下左右居中
.center_noWH(@width, @height) {  
	display: flex;
  align-items: center;
  justify-content: center;
}

• 利用less写出具有层级结构的css, 父选择器可以与伪类结合起来使用

.header {
  .p {
    color: red
  }
  &:hover {
    color: green
  }
}