预处理器编译工具

最新推荐文章于 2022-12-13 00:50:00 发布

Smile_ping

最新推荐文章于 2022-12-13 00:50:00 发布

阅读量4.2k

点赞数

分类专栏： IDE工具相关文章标签： sass less 预处理器编译方式与工具

本文链接：https://blog.csdn.net/Smile_ping/article/details/123915306

版权

IDE工具相关专栏收录该内容

9 篇文章 0 订阅

订阅专栏

预处理器编译方式与工具

文章目录

预处理器编译方式与工具

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/**"
],

用法/快捷方式

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