CSS、SCSS 和 Less

Visual Studio Code 內建支援 CSS .css、SCSS .scss 和 Less .less 樣式表的編輯。此外，您還可以安裝擴充套件以獲得更多功能。

提示：單擊上面的擴充套件磁貼以閱讀描述和評論，以確定哪個擴充套件最適合您。有關更多資訊，請參閱 Marketplace。

IntelliSense

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 Languages Features 擴充套件還提供了一個格式化程式。該格式化程式適用於 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 中開啟與之前相同的資料夾（包含 .vscode 資料夾下的 styles.scss/styles.less 和 tasks.json），然後在根目錄下建立 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" 屬性。現在從全域性 終端選單中執行 執行任務。請注意，您會看到一個顯示 gulp 檔案中定義任務的列表。選擇 gulp: default 來啟動任務。我們允許您掃描輸出中的編譯問題。根據編譯器，在列表中選擇相應的條目以掃描工具輸出中的錯誤和警告。如果您不想掃描輸出，請從顯示的列表中選擇 從不掃描生成輸出。此時，如果您建立和/或修改 Less 或 SASS 檔案，您將看到相應的 CSS 檔案已生成和/或更改已反映在儲存時。您還可以啟用 自動儲存以使操作更加流暢。

如果您想使 gulp: default 任務成為按下 ⇧⌘B (Windows、Linux Ctrl+Shift+B) 時執行的預設生成任務，請從全域性 終端選單中執行 配置預設生成任務，然後從顯示的列表中選擇 gulp: default。

步驟 4：終止 gulp 預設任務

gulp: default 任務在後臺執行，並監視 Sass/Less 檔案的更改。如果您想停止任務，可以使用全域性 終端選單中的 終止任務。

自定義 CSS、SCSS 和 Less 設定

您可以將以下程式碼檢查警告配置為 使用者和工作區設定。

validate 設定允許您關閉內建驗證。如果您更喜歡使用其他程式碼檢查器，則可以這樣做。

要為 CSS 配置選項，請使用 css.lint. 作為 ID 的字首；對於 SCSS 和 Less，請使用 scss.lint. 和 less.lint.。

如果想啟用程式碼檢查，請將設定設定為 warning 或 error；使用 ignore 來停用它。程式碼檢查會在您鍵入時執行。

後續步驟

繼續閱讀以瞭解：

• 配置任務 - 深入瞭解任務，以幫助您將 SCSS 和 Less 轉譯為 CSS。
• 基本編輯 - 瞭解功能強大的 VS Code 編輯器。
• 程式碼導航 - 快速瀏覽您的原始碼。
• HTML - CSS 只是開始，VS Code 對 HTML 也提供了非常好的支援。

常見問題

VS Code 提供顏色選擇器嗎？

是的，將滑鼠懸停在 CSS 顏色引用上即可顯示顏色選擇器。

是否支援基於縮排的 Sass 語法（.sass）？

不支援，但 Marketplace 中有幾個擴充套件支援縮排式 Sass，例如由 Robin Bentley 最初建立、現由 Leonard Grosoli 維護的 Sass 擴充套件。