CSS、SCSS 和 Less

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

提示： 按一下上方的擴充功能磚，閱讀描述和評論，以決定哪個擴充功能最適合您。在市集中查看更多資訊。

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-directives、虛擬類別和虛擬元素的理解。然後，VS Code 將為提供的屬性、at-directives、虛擬類別和虛擬元素提供語言支援，例如完成和懸停資訊。

您可以在 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.js 發行版本中包含 Node Package Manager (npm)。您需要開啟新的終端機 (命令提示字元)，才能讓 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();
  })
);

這裡發生了什麼事？

1. 我們的預設 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" 屬性。現在從全域 [終端機] 功能表執行 [執行工作]。請注意，您會看到一個選擇器，其中列出 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. 作為識別碼的前置詞；對於 SCSS 和 Less，請使用 scss.lint. 和 less.lint.。

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

後續步驟

繼續閱讀以了解

• 設定工作 - 深入了解工作，以協助您將 SCSS 和 Less 轉譯為 CSS。
• 基本編輯 - 了解功能強大的 VS Code 編輯器。
• 程式碼導覽 - 快速瀏覽您的原始程式碼。
• HTML - CSS 只是開始，VS Code 也非常支援 HTML。

常見問題

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

是的，將滑鼠游標停留在 CSS 色彩參考上方，就會顯示色彩選擇器。

是否支援以縮排為基礎的 Sass 語法 (.sass)？

否，但市集中有幾個擴充功能支援縮排式的 Sass，例如，最初由 Robin Bentley 建立，現在由 Leonard Grosoli 維護的 Sass 擴充功能。