概览

Less 是什么？

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

Less安装

通过 npm 安装

npm install less -g

-g: 表示全局安装

若想安装特定版本号可以在less后加上@+版本号

Less转换为CSS

less是没有办法直接使用在浏览器上面的，只有css才能直接使用到浏览器的上面。所以我们要把less转化成css。

1. 通用方式

• 新建一个less文件（a.less）

@color: blue; 
a { 
	color: @color; 
	background-color: @color; 
}

• 打开cmd，cd到less文件目录，输入以下命令：

lessc a.less a.css

这样a.less文件的代码就会编译为css代码并保存到a.css文件中

a { 
 color: blue; 
 background-color: blue; 
}

2. 在VSCode中使用less（可以使用插件）

• 在vscode拓展插件中搜索Easy LESS点击安装即可。
• 安装后只要新建了一个.less后缀的文件，软件就会在同一目录下自动创建一个.css的文件，并且在.less文件编写代码并按下Ctrl+S保存的同时，css文件会编译生产相应的css代码。

变量（Variables）

使用变量可以方便修改属性值。在Less中可以使用变量：表达式：@+变量名 : 属性值

@color: #1a2a3a; // 变量声明 
body { // 使用变量 
	background-color: @color; 
} 
div { 
	color: @color; 
}

编译为：

 /* css */ 
 body { 
  background-color: #1a2a3a; 
 } 
 div { 
  color: #1a2a3a; 
 }

注释（Comments）

在less中可以进行代码注释，方式有单行注释（//）、多行注释（/ *  * /） 两种，但是只有多行注释才能在编译后的文件中出现。

@color: #1a2a3a; 
body { 
	// 使用变量 
	/*使用变量*/ 
	background-color: @color; 
}

编译为：

/* css */
body { 
 /*使用变量*/ 
 background-color: #1a2a3a; 
}

混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

.length { 
	width: 100px; 
	height: 200px; 
}
# apple a {
	color: #222; .length(); 
} 
.happy a { 
	color: blue; 
	.length(); 
}

编译为：

/* css */ 
.length { 
 width: 100px; 
 height: 200px; 
}
# apple a {
 color: #222; 
 width: 100px; 
 height: 200px; 
} 
.happy a { 
 color: blue; 
 width: 100px; 
 height: 200px; 
}

嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

1. 选择器嵌套

div { 
	h1 { 
		color: #333; 
	} 
	p { 
		margin-bottom: 1.4px; 
		a { 
			color: #999; 
		} 
	} 
}

编译为：

/* css */ 
div h1 { 
 color: #333; 
} 
div p { 
 margin-bottom: 1.4px; 
} 
div p a { 
 color: #999; 
}

2. 父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a { 
	font-weight: bold; 
	text-decoration: none; 
	&:hover { 
		text-decoration: underline; 
	} 
	body.firefox & { 
		font-weight: normal; 
	} 
}

编译为：

/* css */ 
a { 
 font-weight: bold; 
 text-decoration: none; 
} 
a:hover { 
 text-decoration: underline; 
} 
body.firefox a { 
 font-weight: normal; 
}

@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

.component { 
	width: 300px; 
	@media (width: 567px) { 
		width: 600px; 
		@media (resolution: 192dpi) { 
			background-image: url(/img/1.png); 
		} 
	} 
	@media (width: 1120px) { 
		width: 400px; 
	} 
}

编译为：

/* css */ 
.component { 
 width: 300px; 
} 
@media (width: 567px) { 
 .component { 
  width: 600px; 
 } 
} 
@media (width: 567px) and (resolution: 192dpi) { 
 .component { 
  background-image: url(/img/1.png); 
 } 
} 
@media (width: 1120px) { 
 .component { 
  width: 400px; 
 } 
}

运算（Operations）

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

.class { 
	width: @width; 
	color: @color; 
} 
@width: 0.4 + 0.4; 
@base: 0.1 ; 
@sub: @width - @base; 
@color: #121a2a * 2; // 颜色运算
# div {
	color: @color;
	width: @sub;
}

编译为：

.class { 
 width: 0.8; 
 color: #243454; 
}
# div {
 color: #243454; 
 width: 0.7; 
}

转义（Escaping）

转义（Escaping）允许使用任意字符串作为属性或变量值，编译后会原样输出。 格式：~"(任意字符串)"

@min678: ~"(min-width: 678px)"; 
.element { 
	@media @min678 { 
		font-size: 0.8rem; 
	} 
}

编译为：

@media (min-width: 678px) { 
 .element { 
  font-size: 0.8rem; 
 } 
}

注意，从 Less 3.5 开始，可以简写为：(任意字符串)

@min678: (min-width: 678px); 
.element { 
	@media @min678 { 
		font-size: 0.8rem; 
	} 
}

在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。

函数（Functions）

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

@width: 0.4; 
@color: #1a2a3b; 
.class { 
	width: percentage(@width); 
	color: saturate(@color, 5%); 
	background-color: spin(lighten(@color, 25%), 8); 
}

编译为：

/* css */ 
.class { 
 width: 40%; 
 color: #182a3d; 
 background-color: #415e94; 
}

了解更多函数：**函数手册**

命名空间和访问符

为了组织结构、为了以后方便重用或分发、为了提供一些封装的目的，或是为了对混合（mixins）进行分组。可以将一些混合（mixins）和变量置于 #bundle 之下：

# bundle() {
	.button { 
		border: 1px solid red; 
		&:hover { 
			background-color: black; 
		} 
	} 
}
# header a {
	color: blue; 
	#bundle.button(); // 还可以书写为 #bundle > .button 形式 
}

编译为：

# header a {
 color: blue; 
 border: 1px solid red; 
}
# header a:hover {
 background-color: black; 
}

映射（Maps）

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

@width: 0.4; 
@color: blue;
# div {
	color: @color;
	width: @width;
} 
.span{ 
	color: #div[color]; 
	width: #div[width]; 
}

编译为：

# div {
 color: blue; width: 0.4; 
} 
.span { 
 color: blue; 
 width: 0.4; 
}

作用域（Scope）

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@width: 0.4; 
@color: blue;
# div {
	@color: white; 
	#header { 
		color: @color; // white 
		width: @width; // 0.4 
	} 
}

编译为：

# div #header {
 color: white; 
 width: 0.4; 
}

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。

.class { 
	width: @width; 
	color: @color; 
} 
@width: 0.4; 
@color: blue;

编译为：

.class { 
 width: 0.4; 
 color: blue; 
}

导入（Importing）

可以通过@import "要导入的文件名（可以省略文件拓展名）"引用其他less文件中的内容，将其输出在同一个css文件中。

// _test2.less 
body{ 
	text-align: center; 
}

// test.less 
@import "_test2"; // 导入_test2.less文件内容 
@width: 0.4; 
@color: #1a2a3b; 
.class { 
	width: @width; 
	color: @color; 
}

编译为：

/* css */ 
body { 
 text-align: center; 
} 
.class { 
 width: 0.4; 
 color: #1a2a3b; 
}