掌握Less的基本用法

1 less中的变量

//对值进行声明
@link-color: #ccc

//定义变量名称
.@{sleName} {}

@bg: background-color;
//定义属性名称
.container {
	@{bg}: red;
}

2 继承（复用重复样式）

//继承必须位于选择器最后
//继承选择器名不能为变量
.a:hover:extend(.b) {}

.a {
	&:extend(.b,.c,.d) {}
}

.b {
	.c{}
}
//继承嵌套结构内样式需要加上all
.a:extend(.b all) {}

3 混合

用于值不确定的场景

//@arguments表示传入的所有参数
.flex(@flex： 1){
	flex: @flex
}

.a {
	.flex(2);
}

//条件mixins
.bg (@color; @width) when (@width >= 50%) {}

4 合并

//相同步骤需要把符号改成+_
.mixin(){
	transform+_: scale(2);
}

5 将颜色字符串转换为可以使用的颜色

.color {
	color: color("#fff");
}

6 获取图片文件的尺寸

.img {
	width: image-width("file.png");
	height: image-height("");
	background-size: image-size("file.png");
}

7 单位转换函数

.convert {
	time: convert(9s,"ms");
}

8 将内联资源转换为base64或text/html格式

.img {
	background: data-uri('../data/image.jpg');
}

9 实践

.flex(@jc:center,@ai:center, @fd: row, @fw: nowrap) {
	display: flex;
	justify-content: @jc;
	align-items: @ai;
	flex-direction: @fd;
	flex-wrap: @fw;
}

.flex_sb_c_w {
	.flex(space-between,center,row,wrap);
}