CSS、SassとLess

IntelliSense

私たちは、セレクタ、プロパティと値のためのサポートを持ちます。コンテキスト固有のオプションのリストを取得するために、Ctrl+Spaceを使用します。

Emmet snippets

Tabを押して、現在の略語の展開します。

ヒント：

有効な略語のためのEmmetカンニング・ペーパーのCSSの項目を参照してください。

また、私たちは、ユーザー定義スニペットをサポートしています。

Syntax coloring & Color preview

あなたが、タイプすると、私たちは、文法の強調表示と同じように、色のコンテキスト・プレビューを提供します。

Syntax Verification & Linting

We support CSS version <= 2.1, Scss version <= 3.2 and Less version <= 1.7.

Goto symbol in file

Simply press Ctrl+Shift+O.

Hovers

セレクタやプロパティの上にカーソルを重ねると、CSS規則によって一致するHTMLスニペットが提供されるでしょう。

Goto Declaration and Find References

これは、同じファイルで、キーフレームと変数のためにサポートされます。

参考：交差したファイル参照（『インポート』）は、解決されません。

Transpiling Sass and Less into CSS

VS Codeは、私たちの統合したタスク実行環境によって、SassとLessトランスパイラを統合することができます。 私たちは、.scssや.lessファイルを.cssファイルにトランスパイルするために、これを使用することができます。 簡単な、Sass/Lessファイルをトランスパイルすることについて、ざっと調べましょう。

Step 1: Install a Sass or Less transpiler

このチュートリアルのため、node-sassか、lessのNode.jsモジュールのどちらかを使用しましょう。

npm install -g node-sass less

Step 2: Create a simple Sass or Less file

空のフォルダ上で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に変更します。

備考

これは、極めて簡単な例です。それは、なぜコードが、両方のファイルタイプの間でほとんど同一であるかの理由です。 より進化した予想される展開では、文法と構成概念は、非常に異なります。

次の手順は、タスク設定を設定することです。Command PaletteをF1で開き、そして、設定タスク実行環境でタイプするために、それを選択するために、Enterを押します。

これは、.vscodeフォルダのサンプルtasks.jsonファイルを作成するでしょう。最初のファイルは、その中に、多数の例を備えています。

ヒント：

サンプルが、一般的な構成の設定を助けるために、そこにある間、IntelliSenseは、 あなたを一緒に助けるために、tasks.jsonファイルのために利用できます。 使用可能な設定を見るために、Ctrl+Spaceを使用します。

最初の例は、TypeScript編集のための設定タスクを、どのように、使用するかを示します。私たちは、その代わりに、Less/Sassをトランスパイルするための設定を、簡単に修正できるでしょう。：

// Sass configuration
{
    "version": "0.1.0",
    "command": "node-sass",
    "isShellCommand": true,
    "args": ["styles.scss", "styles.css"]
}

// Less configuration
{
    "version": "0.1.0",
    "command": "lessc",
    "isShellCommand": true,
    "args": ["styles.less", "styles.css"]
}

Step 4: Run the Build Task

これがファイル内の唯一のタスクとして、あなたは、単純に、Ctrl+Shift+B（ビルド作業の実行）を押すことによって、それを実行することができます。 この時点で、あなたは、style.cssのファイルリスト内に表示された、追加のファイルを見るでしょう。

サンプルSass/Lessファイルは、どんな、コンパイルの問題も持っていませんでした。 それで、実行中のタスクに発生した全ては、対応するstyles.cssファイルに作成されます。

Automating Sass/Less compilation

もう少し何かしてみましょう。そして、VS Codeで、Sass/Lessのコンパイルを自動化します。 私たちは、いくつかの修正は必要ですが、従来通り、同じタスク実行環境の統合を行うことができます。

Step 1: Install Gulp and some plug-ins

私たちは、Sass/Lessのコンパイルを自動化するタスクを作成するために、Gulpを使用します。 また、私たちは、僅かに簡単に作成するために、gulp-sassプラグインを使用します。Lessプラグインは、gulp-lessです。

npm install -g gulp gulp-sass gulp-less

参考：

gulp-sassとgulp-lessは、私たちが使用していたnode-sassとlesscモジュールのためのGulpプラグインです。 あなたが、使用することができる、多くの他のGulp Markdownプラグインと同じように、Gruntのためのプラグインがあります。

Step 2: Create a simple Gulp task

前と同じフォルダの上で、VS Codeを開きます。（.vscodeフォルダ下に、styles.scss/styles.lessとtasks.jsonが含まれています）、 そして、ルートに、gulpfile.jsを作成します。そのファイルに、次のコードを配置します。：

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});

gulp.task('default', function() {
    gulp.watch('*.scss', ['sass']);
})

// Less configuration
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function() {
    gulp.src('*.less')
        .pipe(less())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});

gulp.task('default', function() {
    gulp.watch('*.less', ['less']);
})

ここで、何が起こるのでしょうか？

1. 私たちは、私たちの作業スペースのルートで、Sass/Lessファイルの変更を監視しています。すなわち、カレント・フォルダは、VS Codeで開かれます。
2. 私たちは、変更したSass/Lessファイルの設定を取得します。そして、私たちのそれぞれのコンパイラ、すなわちgulp-sass、gulp-lessで、それらを実行します。
3. 私たちには、現在、対となるCSSファイルがあります。それぞれは、それぞれ、元のSass/Lessファイルの後ろに、名づけられます。 私たちは、続いて、これらのファイルを、同じディレクトリに配置しました。

Step 3: Modify the configuration in tasks.json for watching

VSコードで、タスクの統合を完了するために、私たちは、前もって、タスク設定を修正しておく必要があるでしょう。 私たちがちょうど作成した、既定のGulpタスクの監視を設定するために、あなたのタスク設定は、現在、このように見えている必要があります。：

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always",
            "isWatching": true
        }
    ]
}

Step 4: Run the Build Task

あらためて、これがファイル内の唯一のタスクとして、あなたは、単純に、Ctrl+Shift+B（ビルド作業の実行）を押すことによって、それを実行することができます。 しかし、今度は、私たちは、ステータス・バーが、左側で、それを示す必要があるため、監視を設定しました。

ここで重要な点は、あなたが、他のLess/Sassファイルを作成、そして／あるいは、修正する場合、 あなたは、作成され、そして／あるいは、変更が保存に反映された、それぞれのCSSファイルを見るでしょう。 また、あなたは、さらに多くのものを合理化するために、Auto Saveを有効にすることができます。

あなたが、監視を停止したい場合、あなたは、再び、Ctrl+Shift+Bを押すことができ、そして、メッセージボックスで、Terminate Running Taskをクリックできます。 あるいは、あなたは、F1で、Command Paletteを使用し、そして、そこで、terminate commandを検索することができます。

Customizing CSS, Sass and Less Settings

あなたは、User、あるいは、Workspace設定として、以下のリント警告を構成することができます。

ヒント：

UserとWorkspace設定の概要を取得するために、この項目に進みます。

CSSのためのオプションを設定するために、IDへの接頭辞として、css.lint.を使用します。;SassとLessのため、less.lint.とsass.lintを使用します..

あなたが、リントの検査を有効にしたい場合、設定をwarning or errorに設定し、それを無効にするために、ignoreを使用します。 あなたが、タイプすると、リント検査が実行されます。

Next Steps

以下について調べるためにお読みください：

設定タスク－あなたが、あなたのSassとLessを、CSSにトランスパイルすることを助けるために、タスク内を探求します。

進化した編集－エディタが、CSSのような言語のために提供する機能の高機能な設定について調べます。

HTML－CSSは、ちょうど、開始されます。また、HTMLは、VS Codeで極めてよくサポートされます。

Common Questions

Q:あなたは、カラー・セレクタを提供していますか？

A:いいえ、これは現在サポートされません。

Q:あなたは、インデントに基づくSass文法（.sass）をサポートしていますか？

A:いいえ、これは現在サポートされません。