CSS, SCSS 和 Less

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

提示： 点击上面的扩展磁贴以阅读描述和评论，以决定哪个扩展最适合您。在Marketplace中查看更多。

智能感知

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

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

语法着色与颜色预览

在您输入时，会有语法高亮以及颜色的上下文预览。

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

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

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

"editor.colorDecorators": false

要仅为CSS、Less和SCSS禁用它，请使用

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

折叠

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

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

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

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

Emmet 代码片段

Emmet abbreviation support 已内置在 VS Code 中，建议会与其他建议和代码片段一起列在编辑器的自动完成列表中。

提示：查看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任务

在之前的同一文件夹上打开 VS Code（包含 styles.scss/styles.less 和 tasks.json 在 .vscode 文件夹下），并在根目录下创建 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"属性。现在从全局Terminal菜单中执行Run Task。注意，你会看到一个选择器，列出了gulp文件中定义的任务。选择gulp: default以启动任务。我们允许你扫描输出以查找编译问题。根据编译器，在列表中选择适当的条目以扫描工具输出中的错误和警告。如果你不想扫描输出，请从显示的列表中选择Never scan the build output。此时，如果你创建和/或修改Less或SASS文件，你会看到生成的相应CSS文件和/或保存时反映的更改。你还可以启用Auto Save以使事情更加简化。

如果你想将gulp: default任务设置为按下⇧⌘B (Windows, Linux Ctrl+Shift+B)时执行的默认构建任务，请从全局Terminal菜单中运行Configure Default Build Task，并从显示的列表中选择gulp: default。

步骤4：终止gulp默认任务

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

自定义CSS、SCSS和Less设置

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

validate 设置允许您关闭内置的验证。如果您更愿意使用不同的 linter，您可以这样做。

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

如果你想启用 lint 检查，请将设置设置为 warning 或 error，使用 ignore 来禁用它。Lint 检查会在你输入时进行。

下一步

继续阅读以了解以下内容：

• 配置任务 - 深入了解任务，帮助你将SCSS和Less转换为CSS。
• Basic Editing - 了解强大的VS Code编辑器。
• Code Navigation - 快速浏览您的源代码。
• HTML - CSS 只是一个开始，HTML 在 VS Code 中也得到了很好的支持。

常见问题

VS Code 是否提供颜色选择器？

是的，将鼠标悬停在CSS颜色参考上，颜色选择器就会显示出来。

是否支持基于缩进的Sass语法（.sass）？

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