less采用Koala工具调试开发

一下载koala工具

• 下载地址：http://dl.zasuv.com/download/[email protected]
  傻瓜式安装即可。
• 安转好的界面

图片.png

可以在设置里修改语言

二、设置和使用

• 设置语言

  
  
  

  图片.png
  
  

  ！注意需要重启才可以生效...

• 设置less编译参数

图片.png

source map表示生成的css与less文件的对应地图
line comments 表示生成的css开启行注释
compress 表示输出的css是压缩版的
注意正式环境关闭行注释
！ 注意文件修改后会自动编译，只需引入生成好的css即可，less文件错误是会有错误提示。

• 这样你就可以开调试时看到这样的

图片.png

less对应得位置

• 添加文件

图片.png

添加less文件夹到这里（添加按钮和拖拽都可以），右键可以重命名，方便分类

图片.png

右侧是文件列表，点击可以单独设置参数

图片.png

右键可以设置输出路径（默认是当前路径）

图片.png

三、less语法需注意的地方

• 完全支持css语法

• 可以引入less文件(文件可以省略.less)，模块化css开发

  
  
  

  图片.png

• 也可以引入css，文件必须加上.css

  
  
  

  图片.png
  
  

  *支持混合，可以这样写

  
  
  

  图片.png
• 定义变量

图片.png

调用变量，采用就近原则

图片.png

• 运算符要空空格

图片.png

更多用法可以参考：http://less.bootcss.com/functions/

图片.png

体验把css单做编程语言开发的乐趣吧，同时koala还可以压缩js，将多个js文件合并压缩为一个，减少http请求，用法

// @koala-prepend "xxx.js"为include包含js文件