CSS、SCSS及其他

Visual Studio Code 内置支持 CSS 中编辑样式表.css，SCSS.scss以及更少.less.此外，你还可以安装扩展以增强功能。

提示：点击上方的扩展图块，阅读描述和评价，决定哪个扩展最适合你。更多内容请见市场。

IntelliSense

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

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

语法着色与色彩预览

你打字时，语法高亮和上下文中颜色预览。

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

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

你可以通过设置以下设置隐藏 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 缩写支持内置于 VS Code 中，建议与其他建议和摘要一同列入编辑器自动补全列表中。

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

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

语法验证与线条化

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

注：你可以通过设置相应的 CSS 来禁用 VS Code 默认的 CSS、Sass 或 Less 验证.valid用户或工作区设置改为false。

"css.validate": false

前往文件中的符号

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

悬浮

将鼠标悬停在选择器或属性上，会显示一个HTML片段，并与CSS规则匹配。

前往声明并查找参考文献

这支持同一文件中的 Sass 和 Less 变量。标准草案提案中的CSS变量也被支持。

有跳转到定义@import以及URL（）链接在CSS、SCSS和Less中。

CSS 自定义数据

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

你可以在 vscode-custom-data repository 中了解更多关于如何使用自定义数据的信息。

格式

CSS 语言功能扩展也提供了格式化器。该格式化器支持CSS、LESS和SCSS。它由 JS Beautify 库实现，并附带以下设置：

• css.format.enable

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 启用/禁用默认CSS格式化器。
• css.format.newlineBetweenRules之间

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 用空白行分隔规则集。
• css.format.newlineBetweenSelectors

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 用新线分开选择器。
• css.format.spaceAroundSelectorSesolator

  • 在VS代码中打开
  • 在VS Code Insiders中开放
  - 确保选择分隔符 '>'， '+'， '~' 周围有空格字符（例如，A > B).

同样的设置也适用于更少以及SCSS.

将 SASS 和 Less 转编成 CSS

VS Code 可以通过我们的集成任务运行工具与 Sass and Less 的转译器集成。我们可以利用这个来转叠.scss或.less文件变为.css文件。让我们来讲讲如何转译一个简单的 Sass/Less 文件。

步骤1：安装Sass或Less的转介机

本次攻略中，我们用sass模块或less Node.js模块。

注：如果你还没有安装Node.js和 npm 包管理器，这个攻略需要安装。为你的平台安装Node.js。节点包管理器（NPM）包含在Node.js发行版中。你需要为 打开一个新的终端（命令提示符）NPM走在你的道路上。

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.

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

第三步：制作tasks.json

下一步是设置任务配置。作方法是在终端>配置任务，然后点击模板创建tasks.json文件。在弹出的选择对话框中，选择“其他”。

这样可以生成一个样本tasks.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"
    }
  ]
}

// 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 两个 （-g切换）以及本地：

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

注： 咕噜咕噜以及无吞咽是 Gulp 插件萨斯以及莱斯克我们之前用的模块。你还有很多其他Gulp Sass和Less插件可以使用，还有Grunt的插件。

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

第二步：创建一个简单的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. 我们的默认Gulp 任务首先执行萨斯或更少任务启动时一次。
2. 然后它会监控工作区根节点上任何 SCSS/Less 文件的更改，比如当前在 VS Code 中打开的文件夹。
3. 例如，它会将所有已更改的 SCSS/Less 文件集，并通过我们各自的编译器运行咕噜咕噜,无吞咽.
4. 我们现在有一组CSS文件，每个文件分别以其原始的SCSS/Less文件命名。然后我们把这些文件放到同一个目录里。

步骤3：运行Gulp默认任务

为了完成与VS Code的任务集成，我们需要修改之前的任务配置，以运行刚刚创建的默认Gulp任务。你可以删除tasks.json归档或清空，只保留“版本”：“2.0.0”财产。现在从全局终端菜单执行“运行任务”。注意，你会看到一个选择器，列出了 gulp 文件中定义的任务。选择 gulp： default 开始任务。我们允许您扫描输出以查找编译问题。根据编译器的不同，选择列表中合适的条目扫描工具输出是否有错误和警告。如果你不想扫描输出，可以选择“永不扫描构建输出”。此时，如果你创建和/或修改 Less 或 SASS 文件，你会看到相应的 CSS 文件生成和/或更改反映在保存中。你还可以启用自动保存，让流程更加简洁。

如果你想让 gulp： default 任务成为按 ⇧⌘B 时执行的默认构建任务（Windows，Linux 的 Ctrl+Shift+B），请从全局终端菜单运行配置默认构建任务，并从列表中选择 gulp： default。

步骤4：终止gulp默认任务

Gulp：默认任务会在后台运行，监控文件对 Sass/Less 文件的更改。如果你想停止任务，可以在全局终端菜单中使用“终止任务”。

自定义CSS、SCSS及更少设置

你可以将以下棉絮警告设置为用户和工作区设置。

该验证设置允许你关闭内置的验证功能。如果你想用别的linter，你会这么做。

要配置CSS选项，请使用css.lint。作为ID的前缀;对于SCSS及以下，使用SCSS.lint。以及更少。绒毛。.

设置为警告或错误如果你想启用绒毛检测，请使用忽略用来关闭它。棉絮检测会在你输入时进行。

下一步

继续阅读，了解：

• 配置任务——深入任务，帮助你将 SCSS 和 Less 转为 CSS。
• 基础编辑——了解强大的VS Code编辑器。
• 代码导航——快速浏览源代码。
• HTML——CSS只是起点，VS Code中HTML支持也非常好。

常见问题

VS Code 有提供颜色选择器吗？

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

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

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