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 都能完满运行。

装置

下载地址

  1. 开始下载软件

http://koala-app.com/index-zh.html

应用

  1. 新建一个 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>

  1. 新建 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;        }    }

  1. 把 study 我的项目拖到 koala 中，它会自动识别所有 scss 文件同时生成对应的 css 文件。

  1. 回到我的项目中，此时曾经发现生成了 css 文件，进行查看编译后的 css。

  1. 在 index.html 中引入 css 文件，记住不能间接引入 scss 文件，浏览器不会辨认的。

  1. 预览网页成果

  1. 只有开启了 Koala 软件，它就会实时监听咱们的 scss 文件。后续只有批改了 scss 文件，css 文件也会主动同步更新。

原文链接：https://note.noxussj.top/?source=sifo