less快速入门-以及less环境的搭建

less中文网传送门：

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

 

less是动态样式表语言，通过简洁明了的语法定义，使编写css的工作变得非常简单，本质上，less包含一套自定义的语法及一个解析器

安装：

1，安装node环境   cmd窗口测试是否安装成功   （node -v   npm - v）

2，打开控制台（cmd），执行npm install -g -less（-g全局） ，验证（lessc -v）是否成功 （npm  node packet manager）

 

less文件的编译（环境的搭建）：

一 .在cmd窗口编译

1.建立一个以“.less”为后缀的文件（例：demo.less），使用记事本打开，在里面写入@color:red; a{color:@color;}

2.编译成css文件：

　　2.1控制台定位到当前demo.less所在的目录位置（输入“cd 位置”），

　　2.2接着输入 lessc demo.less test.css,这时在桌面有编译后生成test.css文件　　（demo.less是被编译的文件名称，test.css是编译需要生成的文件名称），这时编译成功。

二.HBuilderX配置Less或者Sass自动编译（其他工具自行摆渡）

1、在点击工具，选择插件安装：

2、找到less，点击安装:

 

3、配置less使其能自动编译成.css文件：

菜单栏 - >工具 -> 插件配置 -> compile-less ->README.MD

 

 

4、在hbuilder中创建一个扩展名为.less的文件，保存后会自动会生成同名的.css文件，在html文件里样式表引入这个.css的文件即可。每次编辑.less的文件保存后，相应的.css文件都会更新。

注意，当我们再次打开hbuilderX ，你会发现自动编译会失败 ，那么这个时候  打开cmd，输入lessc -v  显示版本号，那么再次使用hBuilderX成功

5.0 移动web-less语法说明