CSS、SCSS 和 Less
Visual Studio Code 内置了对编辑 CSS (.css
)、SCSS (.scss
) 和 Less (.less
) 样式表的全面支持。此外,你还可以安装扩展来获取更多功能。
提示:点击上面的扩展磁贴,阅读描述和评论,决定哪个扩展最适合你。在市场中查看更多。
智能感知
VS Code 支持选择器、属性和值。使用 ⌃Space (Windows、Linux Ctrl+Space) 来获取上下文相关的选项列表。
建议包含详细文档,包括支持该属性的浏览器列表。要查看所选条目的完整描述文本,请使用 ⌃Space (Windows、Linux Ctrl+Space)。
语法着色和颜色预览
当你键入时,会进行语法高亮以及在上下文中预览颜色。
点击颜色预览会启动集成的颜色选择器,它支持配置色相、饱和度和不透明度。
提示:通过点击选择器顶部的颜色字符串,可以在不同的颜色模式之间切换。
通过设置以下设置,可以隐藏 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 片段。
转到定义和查找所有引用
同一文件中的 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();
})
);
这里发生了什么?
- 我们的默认 gulp 任务在启动时首先运行一次
sass
或less
任务。 - 然后它会监视工作区根目录下任何 SCSS/Less 文件的更改,例如在 VS Code 中打开的当前文件夹。
- 它获取已更改的 SCSS/Less 文件集,并通过我们各自的编译器运行它们,例如
gulp-sass
、gulp-less
。 - 我们现在得到了一组 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 检查,将设置设为 warning
或 error
;使用 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 | 使用 padding 或 border 时不要使用 width 或 height |
ignore |
universalSelector | 使用通用选择器 * 时发出警告,因为它已知会很慢,应避免使用 |
ignore |
zeroUnits | 零带有单位时(例如 0em )发出警告,因为零不需要单位。 |
ignore |
fontFaceProperties | 使用 @font-face 规则时未定义 src 和 font-family 属性时发出警告 |
warning |
hexColorLength | 使用由非三位或六位十六进制数字组成的十六进制数字时发出警告 | error |
argumentsInColorFunction | 颜色函数参数数量无效时(例如 rgb )发出警告 |
error |
unknownProperties | 使用未知属性时发出警告 | warning |
ieHack | 使用 IE hack *propertyName 或 _propertyName 时发出警告 |
ignore |
unknownVendorSpecificProperties | 使用未知的供应商特定属性时发出警告 | ignore |
propertyIgnoredDueToDisplay | 使用因 display 而被忽略的属性时发出警告。例如,对于 display: inline ,width 、height 、margin-top 、margin-bottom 和 float 属性无效。 |
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 扩展。