预处理器编译工具

戚奇略
2023-12-01

预处理器编译方式与工具



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. F1ctrl+shift+P键入Live Sass: Watch Sass以开始实时编译,或者按键入Live Sass: Stop Watching Sass以停止实时编译。
  3. F1ctrl+shift+P键入一次Live Sass: Compile Sass - Without Watch Mode以编译Sass或Scss。
    Sass以开始实时编译,或者按键入Live Sass: Stop Watching Sass`以停止实时编译。
  4. F1ctrl+shift+P键入一次Live Sass: Compile Sass - Without Watch Mode以编译Sass或Scss。
 类似资料: