[开发工具]预处理器编译工具

预处理器编译方式与工具

npm

// 例：安装指定版本
npm install node-sass@4.7.2 sass-loader@7.0.3 -D

// less
npm install -g less

HBuilder x

• 打开工具—>工具—>插件安装

Koala预处理器编译工具

在前几年开始使用的一个编译工具; 拥有多语言、实时编译等特性…

快速入门

Koala

• koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

使用

• 打开工具---->点击+号（选择要编译文件）;
• 根据需要， 设置相关的编译选项等;
• 例：创建.scss文件，会在同级生成.css文件;

$white: #fff;

.wrap {
    .title {
        color: $white;
    }
}


// 编译后：css
.wrap .title {
    color: #fff;
}

VSCode扩展插件

VSCode扩展，实时将SASS / SCSS文件编译/转换为CSS文件。

快速入门

sass

安装扩展

以下方式

• 扩展搜索： Live Sass Compiler可将Sass或Scss实时编译为CSS
• 打开VSCode编辑器，然后按ctrl+P，键入ext install live-sass

常用参数配置

"liveSassCompile.settings.formats":[
    // 扩展
    {
        "format": "compact", //可定制的出口CSS样式（expanded，compact，compressed，nested）
        "extensionName": ".min.css", //编译后缀名
        "savePath": null //编译保存的路径
        // "savePath": "~/../css/"
    } 
],
"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
],

用法/快捷方式

1. Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以打开实时编译。
2. 按F1或ctrl+shift+P键入Live Sass: Watch Sass以开始实时编译，或者按键入Live Sass: Stop Watching Sass以停止实时编译。
3. 按F1或ctrl+shift+P键入一次Live Sass: Compile Sass - Without Watch Mode以编译Sass或Scss。
   Sass以开始实时编译，或者按键入Live Sass: Stop Watching Sass`以停止实时编译。
4. 按F1或ctrl+shift+P键入一次Live Sass: Compile Sass - Without Watch Mode以编译Sass或Scss。