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
网友评论