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 は、ユーザー定義スニペットもサポートしています。

構文検証と Lint

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 ファイルのリストに設定することにより、新しい CSS プロパティ、at-directives、擬似クラス、および擬似要素に対する VS Code の理解を強化できます。VS Code は、提供されたプロパティ、at-directives、擬似クラス、および擬似要素に対して、補完やホバー情報などの言語サポートを提供します。

カスタムデータの使用に関する詳細については、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 Package Manager (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 です。

gulp をグローバル (-g スイッチ) およびローカルの両方にインストールする必要があります

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 タスクを作成する

以前と同じフォルダー (styles.scss/styles.less と tasks.json が .vscode フォルダーの下にある) で 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. default gulp タスクは、起動時に最初に sass または less タスクを 1 回実行します。
2. 次に、ワークスペースのルート (たとえば、VS Code で現在開いているフォルダー) にある SCSS/Less ファイルへの変更を監視します。
3. 変更された SCSS/Less ファイルのセットを取得し、それぞれのコンパイラー (たとえば、gulp-sass、gulp-less) を介して実行します。
4. これで、それぞれの元の SCSS/Less ファイルにちなんで名付けられた CSS ファイルのセットができました。次に、これらのファイルを同じディレクトリに配置します。

ステップ 3: gulp デフォルトタスクを実行する

VS Code とのタスク統合を完了するには、以前のタスク構成を変更して、作成したばかりのデフォルトの Gulp タスクを実行する必要があります。tasks.json ファイルを削除するか、"version": "2.0.0" プロパティのみを保持して空にすることができます。次に、グローバルな [ターミナル] メニューから [タスクの実行] を実行します。gulp ファイルで定義されたタスクをリストするピッカーが表示されることを確認してください。[gulp: default] を選択してタスクを開始します。コンパイルの問題について出力をスキャンできます。コンパイラーに応じて、リストから適切なエントリを選択して、ツール出力のエラーと警告をスキャンします。出力をスキャンしない場合は、表示されたリストから [ビルド出力をスキャンしない] を選択します。この時点で、Less または SASS ファイルを作成および/または変更すると、それぞれの CSS ファイルが生成され、保存時に変更が反映されることがわかります。自動保存を有効にすると、さらに合理化できます。

⇧⌘B (Windows、Linux Ctrl+Shift+B) を押したときに実行されるデフォルトのビルドタスクとして [gulp: default] タスクを設定する場合は、グローバルな [ターミナル] メニューから [デフォルトのビルドタスクの構成] を実行し、表示されたリストから [gulp: default] を選択します。

ステップ 4: gulp デフォルトタスクを終了する

[gulp: default] タスクはバックグラウンドで実行され、Sass/Less ファイルのファイル変更を監視します。タスクを停止する場合は、グローバルな [ターミナル] メニューから [タスクの終了] を使用できます。

CSS、SCSS、Less 設定のカスタマイズ

次の lint 警告をユーザー設定およびワークスペース設定として構成できます。

validate 設定を使用すると、組み込みの検証をオフにできます。別のリンターを使用する場合にこれを行います。

CSS のオプションを構成するには、ID のプレフィックスとして 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 拡張機能などです。