变量

定义变量使用 @ 开头, 赋值与 css 逻辑一样

@fontsize : 10px;
@width : 100%;
@height : @width * 2; /* 可以直接进行运算 */

运算

@fontsize : 10px;
@path : "/path/img/";
.box{
	@font-size: @font-size * 2;
	width: 100%;
	height: 200px;
	background: url('#{@path}/1.png') no-repeat;
}

嵌套 与 &

选择器的嵌套, 表示层级关系, & 表示当前层级

@width : 100%;
ul{
	margin : 0 auto;
	display : block;
	width: @width;
	li{
		display: inline-block;
		width: @width / 4; /* @width = 100%, @width / 4 = 25% */
	}

	a{
		display: inline-block;
		color: #666;
		/* & 表示当前对象 */
		&:hover{
			color: #000;
		}
	}
}

混合

定义一段代码集合, 且可以选择传参, 可以理解为 javascript 中的 function

/*
	定义一个边框的 mixin
	设置了三个参数
*/
.border(@width,@style,@color){
	border : @width @style @color;
}

.box{
	/* 使用 border 这个 mixin */
	.border(1px solid #000);
}


.radius(@radius: 15px){
	border-radius: @radius;
}

.box{
	/* 使用 radius 这个 mixin */
	.radius;   /* 有默认值可以不用传入参数 */
	.radius(); /* 与上同等 */
	
}

在 less 中没有 if else 语法, 但是它提供了类似功能的语法, 使用 when 可以写条件判断, 判断多个条件为真时使用 and 符号连接

.Box(@width) when (@width > 300) and (@width < 1000px){
	border : @width;
}

.main{
	.Box(500px);
}

使用 when 可以写或者条件使用 , 符号

.Box(@width) when (@width < 300) , (@width > 1000px){
	border : @width;
}

.main{
	.Box(500px); /* 不会输出任何内容 */
	.Box(100px); /* 正确 */
	.Box(2000px); /* 正确 */
}

在 less 中不等于条件, 但是提供了 when not 语法

.Box(@width) when (@width = 300px){ /* 当 width 不等于 300px 时才会执行 */
	border : @width;
}

.main{
	.Box(300px); /* 不会输出内容 */
	.Box(500px); /* 输出正确 */
}