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 はユーザー定義スニペットもサポートしています。
構文検証とリンティング
CSS バージョン 2.1 以下、Sass バージョン 3.2 以下、Less バージョン 2.3 以下がサポートされています。
注: VS Code のデフォルトの CSS、Sass、または Less の検証を無効にするには、対応する
.validate
のユーザー設定またはワークスペース設定を false に設定します。"css.validate": false
ファイル内のシンボルへ移動
現在のファイル内の関連する CSS シンボルに素早く移動するには、⇧⌘O (Windows、Linux では Ctrl+Shift+O) を押します。
ホバー
セレクターまたはプロパティにホバーすると、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 のインストールが成功したかどうかは、ターミナルで gulp -v
と入力してテストできます。グローバル (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();
})
);
ここで何が起きているのでしょうか?
default
gulp タスクは、起動時にまずsass
またはless
タスクを一度実行します。- 次に、ワークスペースのルートにあるすべての SCSS/Less ファイルの変更を監視します。例えば、VS Code で現在開いているフォルダーなどです。
- 変更された SCSS/Less ファイルのセットを取得し、それぞれに対応するコンパイラー (例:
gulp-sass
、gulp-less
) を通して実行します。 - これで、元の 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 の設定をカスタマイズする
以下のリント警告をユーザー設定とワークスペース設定として構成できます。
validate
設定を使用すると、組み込みの検証をオフにできます。これは、別のリンターを使用する場合に行います。
ID | 説明 | 既定値 |
---|---|---|
css.validate | すべての CSS 検証を有効または無効にする | true |
less.validate | すべての Less 検証を有効または無効にする | true |
scss.validate | すべての SCSS 検証を有効または無効にする | true |
CSS のオプションを設定するには、ID のプレフィックスとして css.lint.
を使用します。SCSS と Less の場合は、それぞれ scss.lint.
と less.lint.
を使用します。
リントチェックを有効にする場合は設定を warning
または error
に、無効にする場合は ignore
に設定します。リントチェックは入力中に実行されます。
ID | 説明 | 既定値 |
---|---|---|
validate | すべての検証を有効または無効にする | true |
compatibleVendorPrefixes | ベンダー固有のプレフィックスを持つプロパティ (例: -webkit-transition ) を使用する場合、他のすべてのベンダー固有のプロパティ (例: -moz-transition 、-ms-transition 、-o-transition ) も含めるようにしてください。 |
ignore |
vendorPrefix | ベンダー固有のプレフィックスを持つプロパティ (例: -webkit-transition ) を使用する場合、標準のプロパティが存在する場合はそれも必ず含めてください (例: transition )。 |
warning |
duplicateProperties | 同じルールセット内の重複するプロパティについて警告する | ignore |
emptyRules | 空のルールセットについて警告する | warning |
importStatement | import ステートメントが順次ロードされ、ウェブページのパフォーマンスに悪影響を与えるため、import ステートメントの使用について警告する |
ignore |
boxModel | padding または border を使用する場合、width または height を使用しない |
ignore |
universalSelector | ユニバーサルセレクター * は遅いことが知られており、避けるべきであるため、その使用について警告する |
ignore |
zeroUnits | 単位を伴うゼロ (例: 0em ) について警告する。ゼロには単位は不要です。 |
ignore |
fontFaceProperties | src と font-family プロパティを定義せずに @font-face ルールを使用した場合に警告する |
warning |
hexColorLength | 3桁または6桁の16進数ではない16進数を使用した場合に警告する | error |
argumentsInColorFunction | カラー関数 (例: rgb ) のパラメータ数が無効な場合に警告する |
error |
unknownProperties | 未知のプロパティを使用した場合に警告する | warning |
ieHack | IE ハック *propertyName または _propertyName を使用した場合に警告する |
ignore |
unknownVendorSpecificProperties | 未知のベンダー固有のプロパティを使用した場合に警告する | ignore |
propertyIgnoredDueToDisplay | display のために無視されるプロパティを使用した場合に警告する。例えば、display: inline の場合、width 、height 、margin-top 、margin-bottom 、float プロパティは効果がありません。 |
warning |
important | !important を使用した場合に警告する。これは、CSS 全体の詳細度が手に負えなくなり、リファクタリングが必要であることを示唆しているためです。 |
ignore |
float | float を使用した場合に警告する。float は、レイアウトの一側面が変更されると簡単に壊れてしまう脆弱な CSS につながるためです。 |
ignore |
idSelector | ID のセレクター (#id ) を使用した場合に警告する。これらのルールは HTML と密接に結合しすぎているため、セレクターに ID を含めるべきではありません。 |
ignore |
次のステップ
さらに読む
- タスクの構成 - SCSS と Less を CSS にトランスパイルするのに役立つタスクについて詳しく掘り下げます。
- 基本的な編集 - 強力な VS Code エディターについて学習します。
- コード ナビゲーション - ソースコード内をすばやく移動します。
- HTML - CSS は始まりに過ぎません。HTML も VS Code で非常に優れたサポートが提供されています。
よくある質問
VS Code はカラーピッカーを提供していますか?
はい、CSS の色の参照にホバーすると、カラーピッカーが表示されます。
インデントベースの Sass 構文 (.sass) はサポートされていますか?
いいえ、しかし Marketplace には、インデント形式の Sass をサポートするいくつかの拡張機能があります。例えば、元々 Robin Bentley によって作成され、現在は Leonard Grosoli によって管理されているSass 拡張機能などです。