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

構文検証と 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 プロパティ、アットルール、擬似クラス、擬似要素に対する VS Code の理解を深めることができます。これにより、VS Code は提供されたプロパティ、アットルール、擬似クラス、擬似要素に対して補完やホバー情報などの言語サポートを提供するようになります。

カスタムデータの使用に関する詳細は、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 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 といくつかのプラグインをインストールする

Sass/Less コンパイルを自動化するタスクを作成するために Gulp を使用します。また、作業を少し簡単にするために 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 タスクを一度実行します。
2. 次に、ワークスペースのルートにある SCSS/Less ファイルの変更を監視します (たとえば、VS Code で開いている現在のフォルダー)。
3. 変更された 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 ファイルが生成され、および/または変更が保存時に反映されるのがわかります。自動保存を有効にすると、さらに効率化できます。

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

ステップ 4: gulp の default タスクを終了する

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 拡張機能などがあります。