通州区网站建设,固定ip做网站路由设置,wordpress 模板下载失败,价格营销策略案例Koala 介绍
koala 是一个前端预处理器语言图形编译工具#xff0c;支持 Less、Sass、Compass、CoffeeScript#xff0c;帮助 web 开发者更高效地使用它们进行开发。跨平台运行#xff0c;完美兼容 windows、linux、mac。
关键特性
多语言支持
支持 Less、Sass、CoffeeSc…Koala 介绍
koala 是一个前端预处理器语言图形编译工具支持 Less、Sass、Compass、CoffeeScript帮助 web 开发者更高效地使用它们进行开发。跨平台运行完美兼容 windows、linux、mac。
关键特性
多语言支持
支持 Less、Sass、CoffeeScript 和 Compass Framework。
实时编译
监听文件当文件改变时自动执行编译这一切都在后台运行无需人工操作。
编译选项
可以设置各个语言的编译选项。
项目配置
支持为项目创建一个全局配置为文件设置统一编译选项。
错误提示
在编译时如果遇到语法的错误koala 将在右下角弹出错误信息方便开发者定位代码错误位置。
跨平台
Windows、Linux、Mac 都能完美运行。
安装
下载地址
开始下载软件
http://koala-app.com/index-zh.html 使用
新建一个 study 项目并且编写好 index.html 文件。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv classboxdiv classbox1/divdiv classbox2/divdiv classbox3/div/div/body
/html新建 index.scss 文件并且编写好对应的 sass 样式。
$width: 100px;
$height: 100px;.box {.box1 {width: $width;height: $height;background-color: #5cd8a2;}.box2 {width: $width;height: $height;background-color: #ffcb3d;}.box3 {width: $width;height: $height;background-color: #ff8077;}
}把 study 项目拖到 koala 中它会自动识别所有 scss 文件同时生成对应的 css 文件。 回到项目中此时已经发现生成了 css 文件进行查看编译后的 css。 在 index.html 中引入 css 文件记住不能直接引入 scss 文件浏览器不会识别的。 预览网页效果 只要开启了 Koala 软件它就会实时监听我们的 scss 文件。后续只要修改了 scss 文件css 文件也会自动同步更新。
原文链接菜园前端
