less学习（二）—简单基础

一、变量

<div class="color1">
	This is color1
</div>

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
.color1 {
	width: 200px;
	height: 200px;
	background-color: @light-blue;
}

渲染结果为：

注意：由于变量只能定义一次，所以其本质就是常量

二、混合（Mixin）

<div class="color1">
	This is color1
</div>
<div class="color2">
	This is color2
</div>

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
.color1 {
	width: 200px;
	height: 200px;
	background-color: @light-blue;
	margin-bottom: 10px;
}
.color2 {
	margin-bottom: 0;
	.color1;
}

渲染结果：

三、嵌套规则

<div class="color1">
	This is color1
</div>
<div class="color2">
	This is color2
	<div class="color2Child">This is color2Child</div>
</div>

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
.color1 {
	width: 200px;
	height: 200px;
	background-color: @light-blue;
	margin-bottom: 10px;
}
.color2 {
	margin-bottom: 0;
	.color1;
	.color2Child {
		width: 100px;
		height: 100px;
		background-color: #666;
	}
	&:after {
		content: '';
		display: block;
		width: 100%;
		height: 10px;
		background-color: #cf002d;
	};
}

渲染结果：

四、运算

任何数字、颜色或者变量都可以参与运算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

less将会使用出现的单位，在下面这个例子中，最终输出是6px；

@var: 1px + 5;

五、函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。

函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

六、Namespaces & Accessors

<div class="color1">
	This is color1
	<div class="color1Child">This is color1Child</div>
</div>
<div class="color2">
	This is color2
	<div class="color2Child">This is color2Child</div>
</div>

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
.color1 {
	width: 200px;
	height: 200px;
	background-color: @light-blue;
	margin-bottom: 10px;
	.color1Child {
		width: 100px;
		height: 100px;
		background-color: #666;
	}
}
.color2 {
	margin-bottom: 0;
	.color1;
	.color2Child {
		.color1 > .color1Child;
	}
	&:after {
		content: '';
		display: block;
		width: 100%;
		height: 10px;
		background-color: #cf002d;
	};
}

渲染结果为

七、Scope

<div class="color1">
	This is color1
	<div class="color1Child">This is color1Child</div>
</div>

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
@var: red;
.color1 {
	background-color: @light-blue;
	width: 200px;
	height: 200px;
	margin-bottom: 10px;
	.color1Child {
		color: @var;
		width: 100px;
		height: 100px;
		background-color: #666;
		@var: blue;
	}
	@var:#333; 
	color: @var;
}

渲染结果为：

八、导入（Importe）

和你预期的工作方式一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";