使用 VSCode 编辑器来编译 Sass,自动生成对应的css

您所在的位置:网站首页 如何自动生成文件 使用 VSCode 编辑器来编译 Sass,自动生成对应的css

使用 VSCode 编辑器来编译 Sass,自动生成对应的css

2024-04-04 08:06| 来源: 网络整理| 查看: 265

1.首先在vscode商店中搜索easysass,然后安装 在这里插入图片描述 2.在 VSCode 菜单栏依次点击“文件 首选项 设置”,打开 settings.json 全局配置文件。搜索“easysass”,然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中,再根据实际情况修改配置项。 在这里插入图片描述

// easy sass插件 "easysass.compileAfterSave": true, "easysass.excludeRegex": "", "easysass.formats": [ { "format": "expanded", "extension": ".css" }, ], "easysass.targetDir": "./css/"

“easysass.targetDir”: “”,这个属性可以设置对应css存在哪个目录。 easysass.compileAfterSave 保存 scss 或 sass 文件后自动进行编译。默认为 true。一般设为 true,可提高工作效率,如果项目中有不直接编译的文件,例如 variable.scss、theme.scss、mixin.scss 等,建议设为 false,避免这类文件编辑保存后被编译为无效 css 需要手动删除的尴尬。

easysass.excludeRegex 提供一个文件名的正则表达式,匹配的文件会被排除,不会被编译成 css。默认为空,即该功能关闭。个人建议将一些不直接编译的文件以下划线开头命名,例如:mixin.scss,然后设置:"easysass.excludeRegex": "^+",即可排除所有以下划线开头的 scss/sass 文件。

easysass.formats 定义输出 css 文件的排版风格和文件名,是一个数组,可以同时编译输出多个不同风格、文件名的 css 文件。每个数组对象中有两个参数:

easysass.formats[i].format 用以编译生成对应风格的 css,参数值如下:

nested:嵌套缩进的 css 代码。 expanded:没有缩进的、扩展的css代码。 compact:简洁格式的 css 代码。 compressed:压缩后的 css 代码。

easysass.formats[i].extension 顾名思义就是设置编译输出的文件拓展名了,此处可以自定义文件名,输出的 css 文件名会按照“当前 Sass 文件名(不含拓展名)+此处自定义文件名”的格式来生成。 例如:设置 “easysass.formats[i].extension”: “.min.css”,假设当前的 Sass 文件名为 style.scss,则编译输出的 css 文件名为 style.min.css。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3