sass编译方式；Live Sass Compiler和Easy Sass的区别；如何设置Live Sass 只编译当前文件

编译方式

sass中文网：编译Sass

• 命令行编译、软件编译、vscode插件编译，看上述链接
• vscode插件有 Live Sass Compiler 和 Easy Sass

Live Sass Compiler

• Live Sass Compiler使用的人多，依赖于Live Server，所以安装时会如果没有Live Server会自动安装。
• 安装完成点击vscode底部的 watch Sass 来启动实时编译。
• sass中文网：live sass Compiler
• github：常用设置
  • 可以设置编译的四种css风格、后缀名、保存位置
  • 可以设置 编译 排除指定文件夹，或排除指定文件外的文件
  • 或设置只编译指定文件
  • 可以设置编译的后缀名，小程序用的话就可以编译后缀名为wxss
  • 等等
• bug：生成的map文件行号错误，github里有不少相关的issues，还未解决。

使用技巧

• 点击watch Sass的时候，会自动把你打开的文件夹中的.sass和.scss文件全都编译，因为有这个默认设置
  
  
• 但是相信大部分人大多数时候只想编译当前操作的文件
• 研究了一番，发现规则是这样(不同版本可能规则不一样吧，这插件都3.00版了，这个配置搞的确实不人性化)
  • 无论怎么设置includeItems和excludeList，当前文件修改并保存后都会被编译。这就好办了，在excludeList中设置排除掉全部文件即可
• 如下设置

  "liveSassCompile.settings.excludeList": [
      "**"
  ],
  

  • 简单说下他这个通配符规则(不同版本可能有差别)
    • 打开的文件为根目录
    • * 代表文件
    • ** 代表所有本层的文件和文件夹

Easy Sass

这款比较轻量，唯一缺点是不能生成css.map文件

• 虽然下载的人比live sass少，但是个人觉得比live sass方便。没有生成css.map的功能(但是live sass生成的css.map也是错误的，而且需要上述步骤优化设置才能用好，所以没有了css.map的优势，那么easy sass更方便些)。
• 只编译当前修改并执行保存的sass文件
• 常见设置
  • 保存文件自动编译
  • 可以设置编译的四种css风格、后缀名、保存位置
  • 可以设置 编译 排除指定文件夹
  • 等等

---

😁欢迎加入QQ群交流： [游戏-Web-开发技术栈 ☄️] '300567032’
点击下方图标一键加入！

---