共计 1248 个字符，预计需要花费 4 分钟才能阅读完成。
Koala 介绍
原文链接：https://note.noxussj.top/?source=sifo
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 lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></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 文件也会主动同步更新。
原文链接：https://note.noxussj.top/?source=sifo
正文完