在 VS Code 中尝试

CSS、SCSS 和 Less

Visual Studio Code 内置了对编辑 CSS (.css)、SCSS (.scss) 和 Less (.less) 样式表的全面支持。此外,你还可以安装扩展来获取更多功能。

提示:点击上面的扩展磁贴,阅读描述和评论,决定哪个扩展最适合你。在市场中查看更多。

智能感知

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

IntelliSense in CSS

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

语法着色和颜色预览

当你键入时,会进行语法高亮以及在上下文中预览颜色。

Syntax and color

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

Color picker in CSS

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

通过设置以下设置,可以隐藏 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 代码片段

Emmet 缩写支持已内置到 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 片段。

Hover in CSS

转到定义和查找所有引用

同一文件中的 Sass 和 Less 变量支持此功能。CSS 变量也按照标准提案草案得到支持。

在 CSS、SCSS 和 Less 中,可以跳转到 @importurl() 链接的定义。

CSS 自定义数据

你可以通过声明式的自定义数据格式扩展 VS Code 的 CSS 支持。通过将css.customData设置为遵循自定义数据格式的 JSON 文件列表,你可以增强 VS Code 对新 CSS 属性、at 规则、伪类和伪元素的理解。VS Code 随后将为提供的属性、at 规则、伪类和伪元素提供语言支持,例如补全和悬停信息。

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

格式化

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

lessscss 也存在相同的设置。

将 Sass 和 Less 转译为 CSS

VS Code 可以通过集成的任务运行器与 Sass 和 Less 转译器集成。我们可以使用它将 .scss.less 文件转译为 .css 文件。让我们逐步了解如何转译一个简单的 Sass/Less 文件。

步骤 1:安装 Sass 或 Less 转译器

在本演练中,我们使用 sassless Node.js 模块。

注意:如果你尚未安装 Node.jsnpm 包管理器,你需要为本演练安装它们。为你的平台安装 Node.js。Node 包管理器 (npm) 包含在 Node.js 分发版中。你需要打开一个新的终端(命令提示符),以便 npm 位于你的 PATH 中。

npm install -g sass less

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

在空文件夹中打开 VS Code,并创建一个 styles.scssstyles.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

如果你想将该任务设为默认的构建任务来运行,请从全局终端菜单执行配置默认构建任务,然后从出现的列表中选择相应的 SassLess 任务。

注意:如果你的构建失败或看到错误消息,例如“编译目录时必须指定输出目录”,请确保你的 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-sassgulp-less 是我们之前使用的 sasslessc 模块的 Gulp 插件。还有许多其他 Gulp Sass 和 Less 插件以及 Grunt 插件可供使用。

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

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

在之前的同一文件夹(包含 .vscode 文件夹下的 styles.scss/styles.lesstasks.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. 我们的默认 gulp 任务在启动时首先运行一次 sassless 任务。
  2. 然后它会监视工作区根目录下任何 SCSS/Less 文件的更改,例如在 VS Code 中打开的当前文件夹。
  3. 它获取已更改的 SCSS/Less 文件集,并通过我们各自的编译器运行它们,例如 gulp-sassgulp-less
  4. 我们现在得到了一组 CSS 文件,每个文件都以其原始 SCSS/Less 文件命名。然后我们将这些文件放在同一个目录中。

步骤 3:运行 gulp default 任务

为了完成任务与 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 default 任务

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

自定义 CSS、SCSS 和 Less 设置

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

validate 设置允许你关闭内置验证。如果你想使用其他 linter,可以这样做。

ID 描述 默认
css.validate 启用或禁用所有 CSS 验证 true
less.validate 启用或禁用所有 Less 验证 true
scss.validate 启用或禁用所有 SCSS 验证 true

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

如果你想启用 lint 检查,将设置设为 warningerror;使用 ignore 禁用它。lint 检查会在你键入时执行。

ID 描述 默认
validate 启用或禁用所有验证 true
compatibleVendorPrefixes 使用带有供应商特定前缀的属性(例如 -webkit-transition)时,请确保也包含所有其他供应商特定属性,例如 -moz-transition-ms-transition-o-transition ignore
vendorPrefix 使用带有供应商特定前缀的属性(例如 -webkit-transition)时,请确保也包含标准属性(如果存在),例如 transition warning
duplicateProperties 在同一规则集中重复属性时发出警告 ignore
emptyRules 空规则集时发出警告 warning
importStatement 使用 import 语句时发出警告,因为 import 语句是按顺序加载的,这会对网页性能产生负面影响 ignore
boxModel 使用 paddingborder 时不要使用 widthheight ignore
universalSelector 使用通用选择器 * 时发出警告,因为它已知会很慢,应避免使用 ignore
zeroUnits 零带有单位时(例如 0em)发出警告,因为零不需要单位。 ignore
fontFaceProperties 使用 @font-face 规则时未定义 srcfont-family 属性时发出警告 warning
hexColorLength 使用由非三位或六位十六进制数字组成的十六进制数字时发出警告 error
argumentsInColorFunction 颜色函数参数数量无效时(例如 rgb)发出警告 error
unknownProperties 使用未知属性时发出警告 warning
ieHack 使用 IE hack *propertyName_propertyName 时发出警告 ignore
unknownVendorSpecificProperties 使用未知的供应商特定属性时发出警告 ignore
propertyIgnoredDueToDisplay 使用因 display 而被忽略的属性时发出警告。例如,对于 display: inlinewidthheightmargin-topmargin-bottomfloat 属性无效。 warning
important 使用 !important 时发出警告,因为它表明整个 CSS 的特异性已失控,需要重构。 ignore
float 使用 float 时发出警告,因为浮动会导致脆弱的 CSS,布局的某个方面发生变化时很容易被破坏。 ignore
idSelector 使用 id 选择器 #id 时发出警告,因为选择器不应包含 ID,因为这些规则与 HTML 耦合过于紧密。 ignore

下一步

继续阅读以了解

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

常见问题

VS Code 提供颜色选择器吗?

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

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

不,但市场中有几个扩展支持基于缩进的 Sass 语法,例如由 Robin Bentley 最初创建、现在由 Leonard Grosoli 维护的 Sass 扩展。