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语法说明