CSS、SCSS 和 Less

Visual Studio Code 内置了对 CSS .css、SCSS .scss 和 Less .less 样式表的编辑支持。此外，您还可以安装扩展以获得更强大的功能。

提示：点击上方的扩展磁贴阅读说明和评论，以决定哪款扩展最适合您。查看 Marketplace 了解更多信息。

IntelliSense

VS Code 支持选择器、属性和值。使用 ⌃Space (Windows, Linux Ctrl+Space) 来获取上下文相关的选项列表。

建议包含丰富的文档，包括支持该属性的浏览器列表。要查看选中条目的完整描述文本，请使用 ⌃Space (Windows, Linux Ctrl+Space)。

语法着色与颜色预览

在键入时，编辑器会提供语法高亮以及上下文中的颜色预览。

点击颜色预览将启动集成的颜色选择器，该选择器支持配置色相、饱和度和不透明度。

提示：您可以通过点击颜色选择器顶部的颜色字符串来切换不同的颜色模式。

您可以通过设置以下设置来隐藏 VS Code 的颜色预览：

"editor.colorDecorators": false

若仅在 CSS、Less 和 SCSS 中禁用它，请使用：

"[css]": {
    "editor.colorDecorators": false
}

折叠

您可以使用行号与行首之间装订线上的折叠图标来折叠源代码区域。折叠区域适用于所有声明（例如规则声明）以及源代码中的多行注释。

此外，您可以使用以下区域标记来定义折叠区域：CSS/SCSS/Less 中的 /*#region*/ 和 /*#endregion*/，或 SCSS/Less 中的 // #region 和 // #endregion。

如果您更喜欢将 CSS、Less 和 SCSS 的折叠方式切换为基于缩进的折叠，请使用：

"[css]": {
    "editor.foldingStrategy": "indentation"
},

Emmet 代码片段

VS Code 内置了 Emmet 缩写支持，建议会与其他建议和代码片段一同列在编辑器的自动完成列表中。

提示：有关有效缩写的列表，请参阅 Emmet 速查表的 CSS 部分。

VS Code 也支持用户定义代码片段。

语法验证与 Linting

目前支持 CSS <= 2.1 版本，Sass <= 3.2 版本和 Less <= 2.3 版本。

注意：您可以将相应的 .validate 用户设置或工作区设置设为 false，以禁用 VS Code 默认的 CSS、Sass 或 Less 验证。

"css.validate": false

跳转到文件中的符号

您可以按下 ⇧⌘O (Windows, Linux Ctrl+Shift+O) 快速导航到当前文件中的相关 CSS 符号。

悬停信息

将鼠标悬停在选择器或属性上，将提供该 CSS 规则所匹配的 HTML 代码片段。

跳转到声明与查找引用

此功能支持同一文件中的 Sass 和 Less 变量。根据草案标准建议，同时也支持 CSS 变量。

CSS、SCSS 和 Less 中的 @import 和 url() 链接支持跳转到定义。

CSS 自定义数据

您可以通过声明式自定义数据格式扩展 VS Code 的 CSS 支持。通过将 css.customData 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为符合自定义数据格式的 JSON 文件列表，您可以增强 VS Code 对新 CSS 属性、at-指令、伪类和伪元素的理解。VS Code 随后将为提供的属性、at-指令、伪类和伪元素提供语言支持，例如补全和悬停信息。

您可以在 vscode-custom-data 存储库中阅读有关使用自定义数据的更多信息。

格式化

CSS 语言功能扩展还提供了一个格式化程序。该格式化程序适用于 CSS、LESS 和 SCSS。它由 JS Beautify 库实现，并附带以下设置：

• css.format.enable 在 VS Code 中打开 在 VS Code Insiders 中打开 - 启用/禁用默认 CSS 格式化程序。
• css.format.newlineBetweenRules 在 VS Code 中打开 在 VS Code Insiders 中打开 - 用空行分隔规则集。
• css.format.newlineBetweenSelectors 在 VS Code 中打开 在 VS Code Insiders 中打开 - 用换行符分隔选择器。
• css.format.spaceAroundSelectorSeparator 在 VS Code 中打开 在 VS Code Insiders 中打开 - 确保选择器分隔符“>”、“+”、“~”周围有空格（例如 a > b）。

同样的设置也适用于 less 和 scss。

将 Sass 和 Less 转译为 CSS

VS Code 可以通过我们集成的任务运行程序与 Sass 和 Less 转译器集成。我们可以利用这一点将 .scss 或 .less 文件转译为 .css 文件。让我们演示一下如何转译一个简单的 Sass/Less 文件。

第 1 步：安装 Sass 或 Less 转译器

在本演示中，我们将使用 sass 或 less Node.js 模块。

注意：如果您还没有安装 Node.js 和 npm 包管理器，则需要安装它们以完成此演示。为您的平台安装 Node.js。Node Package Manager (npm) 包含在 Node.js 发行版中。您需要打开一个新的终端（命令提示符）以使 npm 加入到您的 PATH 中。

npm install -g sass less

第 2 步：创建一个简单的 Sass 或 Less 文件

在 VS Code 中打开一个空文件夹，并创建一个 styles.scss 或 styles.less 文件。将以下代码放入该文件中：

$padding: 6px;

nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: $padding 12px;
    text-decoration: none;
  }
}

对于上述文件的 Less 版本，只需将 $padding 改为 @padding 即可。

注意：这只是一个非常简单的示例，这就是为什么两种文件类型的源代码几乎相同的原因。在更高级的场景中，语法和结构将会有很大不同。

第 3 步：创建 tasks.json

下一步是设置任务配置。为此，运行终端 > 配置任务，然后点击从模板创建 tasks.json 文件。在弹出的选择对话框中，选择其他 (Others)。

这将在工作区的 .vscode 文件夹中创建一个示例 tasks.json 文件。该文件的初始版本包含运行任意命令的示例。我们将修改该配置以转译 Sass/Less。

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Compile",
      "type": "shell",
      "command": "sass styles.scss styles.css",
      "group": "build"
    }
  ]
}

// Less configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Less Compile",
      "type": "shell",
      "command": "lessc styles.less styles.css",
      "group": "build"
    }
  ]
}

第 4 步：运行生成任务

由于这是文件中的唯一命令，您可以按下 ⇧⌘B (Windows, Linux Ctrl+Shift+B) (运行生成任务) 来执行它。示例 Sass/Less 文件应该没有任何编译问题，因此运行该任务后，只会创建一个相应的 styles.css 文件。

由于在更复杂的环境中可能存在多个生成任务，我们在按下 ⇧⌘B (Windows, Linux Ctrl+Shift+B) (运行生成任务) 后会提示您选择要执行的任务。此外，我们允许您扫描输出以查找编译问题（错误和警告）。根据编译器，在列表中选择一个合适的条目以扫描工具输出中的错误和警告。如果您不想扫描输出，请从显示的列表中选择从不扫描生成输出。

此时，您应该会看到文件列表中多出了一个文件 styles.css。

如果您想将此任务设为默认生成任务，请从全局终端菜单中执行配置默认生成任务，并从显示的列表中选择相应的 Sass 或 Less 任务。

注意：如果您的生成失败，或者看到类似“编译目录时必须指定输出目录”的错误消息，请确保 tasks.json 中的文件名与磁盘上的文件名相匹配。您始终可以通过在命令行运行 sass styles.scss styles.css 来测试您的构建。

自动化 Sass/Less 编译

让我们更进一步，使用 VS Code 自动化 Sass/Less 编译。我们可以使用与之前相同的任务运行程序集成，但需要做一些修改。

第 1 步：安装 Gulp 和一些插件

我们将使用 Gulp 创建一个自动化 Sass/Less 编译的任务。我们还将使用 gulp-sass 插件以简化操作。对应的 Less 插件是 gulp-less。

我们需要全局（使用 -g 开关）和本地安装 gulp：

npm install -g gulp
npm install gulp gulp-sass gulp-less

注意：gulp-sass 和 gulp-less 是我们之前使用的 sass 和 lessc 模块的 Gulp 插件。您还可以使用许多其他 Gulp Sass 和 Less 插件，以及用于 Grunt 的插件。

您可以通过在终端中输入 gulp -v 来测试 gulp 是否安装成功。您应该能看到全局 (CLI) 和本地安装的版本信息。

第 2 步：创建一个简单的 Gulp 任务

在之前的同一个文件夹（包含 styles.scss/styles.less 和 .vscode 文件夹下的 tasks.json）中打开 VS Code，并在根目录下创建 gulpfile.js。

将以下代码放入 gulpfile.js 文件中：

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function(cb) {
  gulp
    .src('*.scss')
    .pipe(sass())
    .pipe(
      gulp.dest(function(f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('sass', function(cb) {
    gulp.watch('*.scss', gulp.series('sass'));
    cb();
  })
);

// Less configuration
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function(cb) {
  gulp
    .src('*.less')
    .pipe(less())
    .pipe(
      gulp.dest(function(f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('less', function(cb) {
    gulp.watch('*.less', gulp.series('less'));
    cb();
  })
);

这里发生了什么？

1. 我们的 default gulp 任务在启动时会先运行一次 sass 或 less 任务。
2. 然后它会监视工作区根目录下任何 SCSS/Less 文件的更改，例如 VS Code 中打开的当前文件夹。
3. 它会获取发生更改的 SCSS/Less 文件集，并通过我们各自的编译器（例如 gulp-sass 或 gulp-less）运行它们。
4. 现在我们得到了一组 CSS 文件，每个文件分别以其原始 SCSS/Less 文件命名。然后我们将这些文件放在同一个目录下。

第 3 步：运行 gulp 默认任务

要完成与 VS Code 的任务集成，我们需要修改之前的任务配置，以运行我们刚刚创建的默认 Gulp 任务。您可以删除 tasks.json 文件，或者将其清空，仅保留 "version": "2.0.0" 属性。现在从全局终端菜单执行运行任务。您会发现弹出了一个选择器，列出了 gulp 文件中定义的任务。选择 gulp: default 以启动任务。我们允许您扫描输出以查找编译问题。根据编译器，在列表中选择一个合适的条目以扫描工具输出中的错误和警告。如果您不想扫描输出，请从显示的列表中选择从不扫描生成输出。此时，如果您创建或修改 Less 或 SASS 文件，您会看到相应的 CSS 文件已生成，或在保存时反映出更改。您还可以启用自动保存，使操作更加简化。

如果您想将 gulp: default 任务设为按下 ⇧⌘B (Windows, Linux Ctrl+Shift+B) 时执行的默认生成任务，请从全局终端菜单中执行配置默认生成任务，并从显示的列表中选择 gulp: default。

第 4 步：终止 gulp 默认任务

gulp: default 任务在后台运行，并监视 Sass/Less 文件的更改。如果您想停止该任务，可以使用全局终端菜单中的终止任务。

自定义 CSS、SCSS 和 Less 设置

您可以将以下 lint 警告配置为用户和工作区设置。

validate 设置允许您关闭内置验证。如果您更倾向于使用其他 linter，则可以这样做。

要为 CSS 配置选项，请使用 css.lint. 作为 ID 的前缀；对于 SCSS 和 Less，请分别使用 scss.lint. 和 less.lint.。

如果您想启用 lint 检查，请将设置设为 warning 或 error；若要禁用它，请使用 ignore。Lint 检查会在您键入时执行。

后续步骤

继续阅读以了解：

• 配置任务 - 深入了解任务，帮助您将 SCSS 和 Less 转译为 CSS。
• 基本编辑 - 了解功能强大的 VS Code 编辑器。
• 代码导航 - 快速浏览您的源代码。
• HTML - CSS 只是开始，VS Code 也对 HTML 提供了非常出色的支持。

常见问题

VS Code 提供颜色选择器吗？

是的，将鼠标悬停在 CSS 颜色引用上，就会显示颜色选择器。

是否有对基于缩进的 Sass 语法 (.sass) 的支持？

没有，但 Marketplace 中有几个扩展支持缩进风格的 Sass，例如最初由 Robin Bentley 创建、现由 Leonard Grosoli 维护的 Sass 扩展。