less

有单独的语法，需要转译成css代码

进入文件夹中，监听less文件

less-watch-compiler less css

变量声明：@name

mixin，直接调用选择器即可

.panel {
	border: 5px solid blue;
	color: green;
}

.litter-panel {
	.panel;
	font-size: 12px;
}

嵌套：

#side-nav {
	background-color: #333;

	a:hover {
		color: #fff;
	}
}

嵌套条件语句：

#banner {
	font-size: 32px;
	background-color: green;

	// Only on small screen devices
	@media screen {
		@media (max-width: 768px) {
			font-size: 18px;
			background-color: blue;
		}
	}
}

运算：

@buttonBgColor:#006699;
@buttonColor: #fff;
@buttonPadding: 5px;

.button {
	background-color: @buttonBgColor;
	color: @buttonColor;
	padding: @buttonPadding;
	display: inline-block;
}

.jump-button {
	.button;
	padding: @buttonPadding + 30;
	background-color: @buttonBgColor * 1.8;
}

导入：

导入文件

@import "buttons";

导入图片

@image: "images/"

#one {
	width: 800px;
	height: 500px;
	background: url("../@{images}tree.jpg");
}

整体思想和sass一样

案例：

html：不同的class对应不同的形状

<h1>Triangle / Mixin in Less</h1>
<div class="triangle top"></div>

less

body {
	background-color: #111;
	color: #ddd;
	text-align: center;
	padding-top: 20px;
}

//triangle mixin,@_匹配任意值
.triangle(@_, @width, @height, @color) {
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}

//向上的三角形
.triangle(top, @width, @height, @color) {
	border-width: 0 @width/2 @height @width/2;
	border-bottom-color: @color;
	border-left-color: fade(@color, 0);
	border-right-color: fade(@color, 0);
}

//向下的三角形
.triangle(bottom, @width, @height, @color) {
	border-width: @height @width/2 0 @width/2;
	border-top-color: @color;
	border-left-color: fade(@color, 0);
	border-right-color: fade(@color, 0);
}

.triangle(left, @width, @height, @color) {
	border-width: @height/2 @width @height/2 0;
	border-right-color: @color;
	border-top-color: fade(@color, 0);
	border-bottom-color: fade(@color, 0);
}

.triangle(right, @width, @height, @color) {
	border-width: @height/2 0 @height/2 @width;
	border-left-color: @color;
	border-top-color: fade(@color, 0);
	border-bottom-color: fade(@color, 0);
}

.triangle(top-right, @width, @height, @color) {
	border-width: 0 @width @height 0;
	border-right-color: @color;
	border-bottom-color: fade(@color, 0);
}

.triangle(top-left, @width, @height, @color) {
	border-width: @height @width 0 0;
	border-top-color: @color;
	border-right-color: fade(@color, 0);
}

.triangle(bottom-right, @width, @height, @color) {
	border-width:  0 0 @height @width;
	border-bottom-color: @color;
	border-left-color: fade(@color, 0);
}

.triangle(bottom-left, @width, @height, @color) {
	border-width:  @height 0 0 @width;
	border-left-color: @color;
	border-top-color: fade(@color, 0);
}

//triangles
.triangle {
	display: inline-block;
	@width: 50px;
	@height: 50px;

	&.top { .triangle(top, @width, @height, red); }
	&.bottom { .triangle(bottom, @width, @height, orange); }
	&.left { .triangle(left, @width, @height, green); }
	&.right { .triangle(right, @width, @height, blue); }
	&.top-right { .triangle(top-right, @width, @height, cyan); }
	&.top-left { .triangle(top-left, @width, @height, yellow); }
	&.bottom-right { .triangle(bottom-right, @width, @height, indigo); }
	&.bottom-left { .triangle(bottom-left, @width, @height, purple); }
}