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 也支援使用者定義代碼片段。

語法驗證與 Linting

支援 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 符號。

懸停提示（Hovers）

將滑鼠懸停在選取器或屬性上，會顯示該 CSS 規則所匹配的 HTML 片段。

移至宣告與尋找參考

這支援同一個檔案中的 Sass 和 Less 變數。CSS 變數（根據 草案標準提案）也同樣受到支援。

在 CSS、SCSS 和 Less 中，支援跳轉至 @import 和 url() 連結的定義。

CSS 自訂資料

您可以透過宣告式 自訂資料格式來擴充 VS Code 的 CSS 支援。透過將 css.customData 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定為符合自訂資料格式的 JSON 檔案清單，您可以增強 VS Code 對新的 CSS 屬性、at-directives、虛擬類別和虛擬元素的理解。VS Code 隨後會為這些提供的屬性、at-directives、虛擬類別和虛擬元素提供語言支援，例如完成與懸停資訊。

您可以在 vscode-custom-data 儲存庫中閱讀更多關於使用自訂資料的資訊。

格式化

CSS 語言功能擴充功能也提供了一個格式化程式。該格式化程式適用於 CSS、LESS 和 SCSS。它由 JS Beautify 程式庫實作，並隨附下列設定：

• css.format.enable 在 VS Code 中開啟 在 VS Code Insiders 中開啟 - 啟用/停用預設 CSS 格式化程式。
• css.format.newlineBetweenRules 在 VS Code 中開啟 在 VS Code Insiders 中開啟 - 以空行分隔規則集。
• css.format.newlineBetweenSelectors 在 VS Code 中開啟 在 VS Code Insiders 中開啟 - 以新行分隔選取器。
• css.format.spaceAroundSelectorSeparator 在 VS Code 中開啟 在 VS Code Insiders 中開啟 - 確保選取器分隔符號「>」、「+」、「~」周圍有空格（例如 a > b）。

相同的設定也存在於 less 和 scss 中。

將 Sass 和 Less 轉譯為 CSS

VS Code 可以透過我們整合的工作執行程式 (Task Runner) 與 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

下一步是設定工作組態。請執行終端機 (Terminal) > 設定工作 (Configure Tasks)，並點選從範本建立 tasks.json 檔案 (Create tasks.json file from template)。在隨後出現的選擇對話方塊中，選擇Others。

這會在工作區的 .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) (執行建置工作) 後提示您選擇要執行的工作。此外，我們允許您掃描輸出的編譯問題（錯誤與警告）。根據編譯器，從清單中選擇合適的項目來掃描工具輸出的錯誤與警告。如果您不想掃描輸出，請從清單中選擇從不掃描建置輸出 (Never scan the build output)。

此時，您應該會在檔案清單中看到多出一個 styles.css 檔案。

如果您想將該工作設為預設建置工作，請從全域終端機 (Terminal) 功能表執行設定預設建置工作 (Configure Default Build Task)，並從呈現的清單中選擇對應的 Sass 或 Less 工作。

注意：如果您的建置失敗，或看到類似 "An output directory must be specified when compiling a directory" 的錯誤訊息，請確保您 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（包含 styles.scss/styles.less 以及 .vscode 資料夾下的 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. 接著，它會監看工作區根目錄（例如 VS Code 中目前開啟的資料夾）中任何 SCSS/Less 檔案的變更。
3. 它會取得已變更的 SCSS/Less 檔案集合，並將其通過各自的編譯器（例如 gulp-sass、gulp-less）進行處理。
4. 現在我們擁有一組 CSS 檔案，每個檔案分別以原始的 SCSS/Less 檔案命名。然後我們將這些檔案放在同一個目錄中。

步驟 3：執行 gulp 預設工作

為了完成 VS Code 的工作整合，我們需要修改之前的工作組態，以執行我們剛剛建立的預設 Gulp 工作。您可以刪除 tasks.json 檔案，或將其清空僅保留 "version": "2.0.0" 屬性。現在從全域終端機 (Terminal) 功能表中執行執行工作 (Run Task)。觀察到您會看到一個選擇器，列出了 gulp 檔案中定義的工作。選擇 gulp: default 以開始該工作。我們允許您掃描輸出以尋找編譯問題。根據編譯器，選擇清單中合適的項目來掃描工具輸出的錯誤與警告。如果您不想掃描輸出，請從清單中選擇從不掃描建置輸出 (Never scan the build output)。此時，如果您建立或修改 Less 或 SASS 檔案，您會看到對應的 CSS 檔案已產生，或是變更在儲存後即時反映。您也可以啟用自動儲存 (Auto Save)，讓整個流程更加流暢。

如果您想將 gulp: default 工作設為按下 ⇧⌘B (Windows, Linux Ctrl+Shift+B) 時執行的預設建置工作，請從全域終端機 (Terminal) 功能表中執行設定預設建置工作 (Configure Default Build Task)，並從呈現的清單中選擇 gulp: default。

步驟 4：終止 gulp 預設工作

gulp: default 工作會在背景執行並監看 Sass/Less 檔案的變更。如果您想停止該工作，可以使用全域終端機 (Terminal) 功能表中的終止工作 (Terminate Task)。

自訂 CSS、SCSS 和 Less 設定

您可以將下列 lint 警告配置為使用者與工作區設定。

validate 設定允許您關閉內建驗證。如果您傾向使用不同的 linter，可以這樣做。

若要為 CSS 設定選項，請使用 css.lint. 作為識別碼的前綴；對於 SCSS 和 Less，請分別使用 scss.lint. 和 less.lint.。

如果您想啟用 lint 檢查，請將設定設為 warning 或 error，若要停用則使用 ignore。Lint 檢查會在您輸入時執行。

後續步驟

繼續閱讀以了解

• 設定工作 - 深入了解如何使用工作來協助您將 SCSS 和 Less 轉譯為 CSS。
• 基本編輯 - 了解功能強大的 VS Code 編輯器。
• 程式碼導覽 - 在原始碼中快速移動。
• HTML - CSS 只是開始，HTML 在 VS Code 中也得到非常完善的支援。

常見問題

VS Code 是否提供色彩選擇器？

是的，將滑鼠懸停在 CSS 顏色參考上，就會顯示色彩選擇器。

是否有支援基於縮排的 Sass 語法 (.sass)？

沒有，但在 Marketplace 中有幾個擴充功能支援縮排風格的 Sass，例如原本由 Robin Bentley 建立，目前由 Leonard Grosoli 維護的 Sass 擴充功能。