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 スニペット

VS Code には Emmet の略語サポート が組み込まれており、エディターの自動補完リストに他の候補やスニペットと一緒に提案が表示されます。

ヒント: 有効な略語については、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 VS Code で開く VS Code Insiders で開く をカスタム データ フォーマットに従った JSON ファイルのリストに設定することで、新しい CSS プロパティ、at-ディレクティブ、疑似クラス、疑似要素に対する VS Code の認識を強化できます。これにより、VS Code は、提供されたプロパティ、at-ディレクティブ、疑似クラス、疑似要素に対する補完やホバー情報などの言語サポートを提供するようになります。

カスタム データの使用に関する詳細については、vscode-custom-data リポジトリを参照してください。

フォーマット

CSS Language Features（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 は、統合されたタスク ランナーを通じて Sass および Less トランスパイラーと連携できます。これを使用して、.scss または .less ファイルを .css ファイルにトランスパイルできます。シンプルな Sass/Less ファイルのトランスパイル手順を見ていきましょう。

ステップ 1: Sass または Less トランスパイラーをインストールする

このチュートリアルでは、Node.js モジュールの sass または less のいずれかを使用します。

注意: まだ 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 です。

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

先ほどと同じフォルダー (.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. 作成した default Gulp タスクは、起動時にまず sass または less タスクを 1 回実行します。
2. その後、ワークスペースのルート（たとえば、VS Code で開いている現在のフォルダー）にあるすべての SCSS/Less ファイルの変更を監視します。
3. 変更された一連 of SCSS/Less ファイルを取得し、それぞれのコンパイラー (gulp-sass や gulp-less など) に通します。
4. これで、元の SCSS/Less ファイルにそれぞれ対応した名前の CSS ファイルのセットが作成されます。その後、これらのファイルを同じディレクトリに配置します。

ステップ 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 の設定のカスタマイズ

以下のリンターの警告は、ユーザー設定およびワークスペース設定として構成できます。

validate 設定を使用すると、組み込みの検証を無効にできます。別のリンターを使用したい場合は、この設定を行います。

CSS のオプションを構成するには、ID の接頭辞として 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) はサポートされていますか？

いいえ。しかし Marketplace には、インデント対応の Sass をサポートする拡張機能がいくつかあります。たとえば、もともと Robin Bentley 氏によって作成され、現在は Leonard Grosoli 氏によってメンテナンスされている Sass 拡張機能などがあります。