less采用Koala工具调试开发

一下载koala工具

图片.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文件
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容