vs code 使用scss/sass
2018-03-06 16:30
483 查看
sass的编译依赖 Ruby 环境
1、安装Ruby 官网下载传送门 注意:安装Ruby时一定要勾选 Add Ruby executables to your PATH,用来将Ruby添加到系统变量,后续可以省却很多不必要的麻烦。
2、装好Ruby后再命令行输入 gem sass 来安装 Sass。
3、装好Sass后,启动 vs code,在拓展商店里搜索“easy sass”,并安装,安装成功后点从新加载。
4、接下来进行配置: 在 vs code 菜单栏依次点击“文件 首选项 设置”,打开 settings.json 全局配置文件。搜索“easysass”,然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中,再根据实际情况修改配置项。
一般开发环境中用到其中两个设置项(上图红框处中的代码):
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”。我们的生产环境中,在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的,而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的,为此我们需要配置输出路径。easysass.targetDir 提供 CSS 输出路径的设置,值可以是绝对路径或相对路径。例如:设置 easysass.targetDir 为 "./css/",此时保存修改完毕的 Sass 文件,VSCode 会自动编译并在当前 Sass 文件的上级文件夹 css 目录下输出生成 CSS 文件(见下图)。
本文所述的只是采用 VSCode 编辑器编译生成 CSS 的一种方式,可能比较原始,实际生产环境中大多采用自动化构建方案,比如 grunt、gulp、fis 等。
作者: WingMeng
链接:https://www.imooc.com/article/19624
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作
1、安装Ruby 官网下载传送门 注意:安装Ruby时一定要勾选 Add Ruby executables to your PATH,用来将Ruby添加到系统变量,后续可以省却很多不必要的麻烦。
2、装好Ruby后再命令行输入 gem sass 来安装 Sass。
3、装好Sass后,启动 vs code,在拓展商店里搜索“easy sass”,并安装,安装成功后点从新加载。
4、接下来进行配置: 在 vs code 菜单栏依次点击“文件 首选项 设置”,打开 settings.json 全局配置文件。搜索“easysass”,然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中,再根据实际情况修改配置项。
一般开发环境中用到其中两个设置项(上图红框处中的代码):
/** Easy Sass 插件 **/ "easysass.formats": [ { "format": "compressed", // 压缩 "extension": ".css" } ], "easysass.targetDir": "./" // 自定义css输出文件路径其中 easysass.formats 是设置编译输出的 css 风格的,可以同时编译输出多个不同风格的 CSS 文件,此处我只设置了一个 easysass.formats 项目,所以编译时只生成一个 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”。我们的生产环境中,在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的,而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的,为此我们需要配置输出路径。easysass.targetDir 提供 CSS 输出路径的设置,值可以是绝对路径或相对路径。例如:设置 easysass.targetDir 为 "./css/",此时保存修改完毕的 Sass 文件,VSCode 会自动编译并在当前 Sass 文件的上级文件夹 css 目录下输出生成 CSS 文件(见下图)。
本文所述的只是采用 VSCode 编辑器编译生成 CSS 的一种方式,可能比较原始,实际生产环境中大多采用自动化构建方案,比如 grunt、gulp、fis 等。
作者: WingMeng
链接:https://www.imooc.com/article/19624
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作
相关文章推荐
- 使用 VSCode 编辑器来编译 Sass
- 使用 VSCode 编辑器来编译 Sass
- 使用VS Code开发调试.NET Core 多项目
- 使用VS Code从零开始开发调试.NET Core 1.1
- 在CentOS上使用VS Code调试.Net Core应用程序
- 在vscode中使用pylint-django插件解决pylint的一些不必要的错误提示
- VScode 的使用
- 使用VS CODE+PlantUML高效画图
- 使用VS Code开发AngularJS 2 第一个应用程序
- Cocos creator 使用 Vscode 2017
- VS Code使用
- vscode 中 使用git命令报错
- 使用typings给vscode添加更多的智能提示
- 欢迎使用 FreeCode for VS60/VS2005 Add-in
- 使用 VSCode 编写 .NET Core 项目之初体验
- VS CODE 下的 ESLint 安装以及使用
- 转:使用VS Code断点调试PHP
- 使用 VS Code 来编辑 markdown 文章
- .NET Core快速入门教程 4、使用VS Code开发.NET Core控制台应用程序
- Centos7 VSCode 使用Python3 详解