less使用

1.Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

2.Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。
*代码：header { color: black; }
#header .navigation { font-size: 12px; }
#header .logo { width: 300px; }
用 Less 语言我们可以这样书写代码：

#header { color: black; .navigation {
font-size: 12px; } .logo {
width: 300px; } }*

混合（Mixins）
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}

.post a {
color: red;
.bordered();
}

嵌套（Nesting）
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
用 Less 语言我们可以这样书写代码：

#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

3.你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (&表示当前选择器的父级）：

.clearfix {
display: block;
zoom: 1;

&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}

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

.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}

编译为：

.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}

4.安装
用NPM

npm install less -g
这个-g选项安装lessc命令可在全球范围内使用。对于特定版本(或标记)，可以添加@VERSION在我们的包裹名称之后。npm install less@2.7.1 -g.

节点开发安装
或者，如果不想在全局使用编译器，则可能在

npm i less --save-dev

————————————————
版权声明：本文为CSDN博主「Dheroo」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Dheroo/article/details/104379021