CSS、SCSS 和 Less

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

提示：点击上方扩展磁贴以阅读描述和评论，从而决定哪个扩展最适合你。在市场中查看更多。

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
}

折叠

你可以使用行号和行首之间空白区域（gutter）上的折叠图标来折叠源代码区域。折叠区域适用于所有声明（例如，规则声明）和源代码中的多行注释。

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

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

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

Emmet 片段

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

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

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

语法验证和代码检查

支持 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 设置为遵循自定义数据格式的 JSON 文件列表，你可以增强 VS Code 对新 CSS 属性、at-指令、伪类和伪元素的理解。VS Code 将为所提供的属性、at-指令、伪类和伪元素提供语言支持，例如补全和悬停信息。

你可以在 vscode-custom-data 仓库中阅读更多关于使用自定义数据的信息。

格式化

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

• css.format.enable - 启用/禁用默认 CSS 格式化程序。
• css.format.newlineBetweenRules - 使用空行分隔规则集。
• css.format.newlineBetweenSelectors - 使用新行分隔选择器。
• css.format.spaceAroundSelectorSeparator - 确保选择器分隔符 '>'、'+'、'~' 周围有一个空格字符（例如，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 包管理器 (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 文件。在出现的选择对话框中，选择其他。

这将在工作区 .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 任务

在之前的相同文件夹（包含 .vscode 文件夹下的 styles.scss/styles.less 和 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 设置允许你关闭内置验证。如果你更喜欢使用不同的 Lint 工具，可以这样做。

要为 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)？

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