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

·  阅读 874

这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战

编译方式

sass中文网:编译Sass

  • 命令行编译、软件编译、vscode插件编译,看上述链接
  • vscode插件有 Live Sass CompilerEasy 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风格、后缀名、保存位置
    • 可以设置 编译 排除指定文件夹
    • 等等
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改