less 编译、变量、混合、上一级选择器&

1、全局安装less
cnpm install less -g

2、检查是否安装成功
lessc --help
lessc -v

安装成功截图

3、在本地新建test.less文件 打开git bash

4、编译less
lessc test.less

5、在test.less文件中写样式和注释

less文件

6、将less编译成css文件
lessc test.less test.css

通过编译生成的css文件

7、将less压缩编译成css文件 （移除注释，压缩代码为一行）
lessc -x test.less test.css

压缩编译的css文件

8、嵌套写法与 “&” 的差异 (css层级关系命名class名称的时候最好使用这种模式，例：content，content-nav，content-body)

嵌套写法less
嵌套写法less编译后的css
子选择器使用 & 的less
子选择器使用 & 编译后的css

9、变量的使用
@basecolor: red;
p{ color: @basecolor}
p{color: @basecolor + #245}

less
css
html页面

10、定义混合并使用（抽离出相同且可复用的css,类似组件化）
.basebox{
width: 300px;
height: 100px;
color: #333;
}

p{
.basebox; //直接用
font-size:16px
}

less
css