CSS, SCSS 和 Less

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

提示： 点击上面的扩展瓷砖以阅读描述和评论，以决定哪个扩展最适合您。查看更多信息在市场。

智能感知

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

CSS中的IntelliSense

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

语法着色 & 颜色预览

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

语法和颜色

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

CSS 颜色选择器

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

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

"editor.colorDecorators"： false

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

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

折叠

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

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

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

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

Emmet片段

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

提示： 查看 Emmet 操作手册中的 CSS 部分，以获取有效的缩写。

VS Code 也支持用户自定义片段.

语法验证 & 代码检查

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

注意： 你可以通过设置相应的.验证 用户或工作区设置为 false。
"css.validate"： false

转到文件中的符号

你可以通过按⇧⌘O（Windows, LinuxCtrl+Shift+O）快速导航到当前文件中的相关CSS符号。

悬浮

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

悬停在CSS

转到声明和查找引用

这在同一个文件中的Sass和Less变量中是支持的。 CSS变量按照草案标准提案也支持。

有跳转到定义@导入和网址()CSS、SCSS和Less中的链接。

CSS 自定义数据

你可以通过声明性自定义数据格式来扩展 VS Code 的 CSS 支持。通过设置

将列表更改为符合自定义数据格式的JSON文件，可以增强VS Code对新CSS属性、at直接指令、伪类和伪元素的理解。VS Code将为此类属性、at直接指令、伪类和伪元素提供语言支持，例如自动完成和悬停信息。

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

格式化

CSS 语言特性扩展还提供了一个格式化器。格式化器可以处理 CSS、LESS 和 SCSS。它由 JS Beautify 库实现，并带有以下设置：

css格式启用
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
- 启用/禁用默认的CSS格式化器。
css.format.newlineBetweenRules
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
- 用空行分隔不同的规则集。
css.format.newlineBetweenSelectors
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
- 用新行分隔选择器。
css.格式.选择器分隔符
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
- 确保选择器分隔符'>'、'+'、'~'周围有空格字符（例如，a > b)。

相同的设置也适用于更少和scss输入：.

将Sass和Less编译成CSS

VS Code 可以通过我们集成的任务运行器与 Sass 和 Less 转译器集成。我们可以利用这一点来转译.scss或.更少文件到.css文件。让我们来编译一个简单的Sass/Less文件。

步骤 1：安装一个 Sass 或 Less 转译器

在这个示例中，我们可以使用 sass 或 less 的 Node.js 模块。

注意： 如果你还没有安装 Node.js 和 npm 包管理器，你需要为此示例进行安装。为你的平台安装 Node.js。Node 包管理器 (npm) 包含在 Node.js 发行版中。你需要打开一个新的终端（命令提示符）npm在你的路径上。

npm install -g sass less

步骤 2: 创建一个简单的 Sass 或 Less 文件

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



导航 {
  无序列表 {
    缘边: 0;
    内边距: $内边距;
    列表样式: 无;
  }

  li { 显示: 行内块级元素; }

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

对于上面文件的精简版本，只需更改$填充至@填充输入：.

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

步骤 3: 创建 tasks.json

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

这将创建一个样本任务.json工作区中的文件.vscode文件夹。文件的初始版本有一个运行任意命令的示例。我们将修改该配置以编译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"
    }
  ]
}

// 更少的配置
{
  // 查看 https://go.microsoft.com/fwlink/?LinkId=733558
  // 了解 tasks.json 格式的文档
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Less 编译",
      "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 任务。

注意： 如果你的构建失败或者你看到类似于“编译目录时必须指定输出目录”的错误信息，请确保你的文件名任务.json匹配磁盘上的文件名。您可以通过运行来始终测试您的构建Sass 样式 styles.scss styles.css从命令行。

自动化Sass/Less编译

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

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

我们将使用Gulp来创建一个自动化Sass/Less编译的任务。我们还将使用gulp-sass插件使事情变得稍微容易一些。Less插件是gulp-less。

我们需要全局安装gulp (输入：-g开关) 和本地:

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

注意： gulp-sass和咕噜-更少是 Gulp 插件萨斯和更少的我们之前使用的模块。还有许多其他Gulp、Sass和Less插件可供使用，以及Grunt的插件。

你可以通过输入来测试你的 gulp 安装是否成功gulp -v在终端中。你应该会看到全局（CLI）和本地安装的版本都显示出来。

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

打开之前相同的文件夹中的 VS Code（包含styles.scss输入：/styles.less和任务.json在.vscode文件夹)，并创建gulpfile.js在根源。

将以下代码放置在gulpfile.js文件:

// Sass 配置
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();
  })
);

这里发生了什么事？

我们的默认gulp 任务首先运行萨斯或更少任务启动时执行一次。
然后，它监视我们工作区根目录下任何SCSS/Less文件的变化，例如在VS Code中打开的当前文件夹。
它会将更改的SCSS/Less文件集合通过我们各自的编译器进行处理，例如gulp-sass，咕噜-更少输入：.
我们现在有一组CSS文件，每个文件分别以原始SCSS/Less文件的名称命名。然后我们将这些文件放在同一个目录中。

步骤 3：运行 gulp 默认任务

为了完成 VS Code 任务集成，我们需要修改之前的任务配置，以运行我们刚刚创建的默认 Gulp 任务。你可以删除任务.json文件或清空它，只保留"版本": "2.0.0" 属性。现在执行 运行任务 从全局终端菜单。观察到您被呈现一个列表，其中列出了在gulp文件中定义的任务。选择 gulp: default 以开始任务。我们允许您扫描输出以查找编译问题。根据编译器，选择列表中的适当条目以扫描工具输出中的错误和警告。如果您不想扫描输出，请从呈现的列表中选择 从不扫描构建输出。在此基础上，如果您创建和/或修改Less或SASS文件，您将在保存时看到相应的CSS文件生成和/或更改。您还可以启用自动保存以使事情更加顺畅。

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

步骤 4：终止 gulp 默认任务

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

自定义CSS、SCSS和Less设置

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

这个验证设置允许您关闭内置验证。如果您更喜欢使用其他代码检查工具，您可以执行此操作。

身份证	描述	默认
css.validate	启用或禁用所有CSS验证	真
less.validate	启用或禁用所有更少验证	真
scss.验证	启用或禁用所有 scss 验证	真

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

设置为警告或错误如果你想要启用 lint 检查，请使用忽略禁用它。在您输入时会进行 Lint 检查。

身份证	描述	默认
验证	启用或禁用所有验证	真
兼容的供应商前缀	当使用带有供应商特定前缀的属性（例如`-webkit过渡`)，确保还包括所有其他供应商特定的属性例如`-moz过渡`，`-微软过渡`和`-过渡`	忽略
供应商前缀	当使用一个带有供应商特定前缀的属性时，例如`-webkit过渡`确保包含标准属性（如果存在的话）例如`过渡`	警告
重复属性	警告在同一个规则集中重复的属性	忽略
空规则	警告空规则集	警告
导入语句	警告使用一个`导入`语句，因为导入语句是按顺序加载的，这对网页性能有负面影响。	忽略
盒子模型	不要使用`宽度`或`高度`当使用`填充`或`边界`	忽略
通用选择器	使用通配符选择器时发出警告`输入：*`众所周知，它很慢，应该避免。	忽略
零单位	当使用单位时，有零值时发出警告，例如`0em`因为零不需要单位。	忽略
字体属性	警告当使用`@字体定义`规则而不定义一个`源`和`字体族`财产	警告
十六进制颜色长度	警告使用不包含三个或六个十六进制数字的十六进制数	错误
参数颜色函数	警告颜色函数中参数数量无效，例如`红绿蓝`	错误
未知属性	使用未知属性时发出警告	警告
ie黑客	使用IE hack时警告`*属性名`或`_属性名`	忽略
未知供应商特定属性	使用未知的供应商特定属性时发出警告	忽略
属性因显示而被忽略	当使用一个因显示而被忽略的属性时发出警告。例如，使用`显示：内联`，，`宽度`，`高度`，`上边距`，`下边距`，和`浮点数`属性没有效果。	警告
重要	警告当使用`!重要`因为这表明整个CSS的特异性已经失控，需要进行重构。	忽略
浮点数	警告当使用`浮点数`使用浮点数会导致脆弱的CSS，如果布局的某一方面发生变化，很容易破坏。	忽略
id选择器	当使用选择器选择id时发出警告`#id`选择器不应包含ID，因为这些规则与HTML过于耦合。	忽略

下一步

继续阅读，了解：

配置任务 - 深入了解任务，帮助您将SCSS和Less编译成CSS。
基本编辑 - 了解强大的 VS Code 编辑器。
代码导航 - 快速浏览您的源代码。
HTML - CSS 只是开始，HTML 在 VS Code 中也得到了很好的支持。

常见问题

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

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

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

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