『Sassって何?Sassの基本知識と利用方法』でVSCodeを使ったSassのコンパイル方法を解説しましたが、このレッスンではより詳しく使い方とオプションの設定方法を解説します。Compile」という拡張機能のインストールが必要です。VSCodeの拡張機能のインストールは、左側にある6つのアイコンの中の下から2つ目を選択し、表示された検索入力欄にインストールしたい拡張機能の名前を入力します。インストールしたい拡張機能が見つかったら、インストールボタンをクリックします。インストールが完了したら、拡張機能が自動的に有効化されます。Compilerにはいくつかのオプションがあり、これらを設定するとコンパイルの出力結果を変更することができます。オプション設定は以下の6つです。Compilerを探し、歯車のアイコンをクリック、続いて「拡張機能の設定を構成します」をクリックします。各ブラウザで先行実装されているCSSを利用する際、プロパティや値の前に「-moz-」や「-webkit-」などのベンダープレフィックスを付ける必要があります。Compilerにはベンダープレフィックスを設定に沿って自動的に付与してくれる「Autoprefix」というオプション設定があります。CompilerのAutoprefixの設定はbrowserslistというオープンソースの記述方法を使います。設定の中からAutoprefixを探し、歯車アイコンをクリック、続いて「JSONとして設定をコピー」をクリックします。「setting.jsonで編集」をクリックします。開いたsetting.jsonに先ほどコピーした設定をペーストします。Compile`のようにコメントを記述しておくと良いでしょう。]}上記の内容の場合、「1%以上のシェアがあるブラウザ」「最後の2バージョンのブラウザ」を対象として、ベンダープレフィックスを付与するという設定になっています。デフォルトではこのような設定になっていますが、これを書き換えると設定が変更できます。設定の記述に悩んだら、browserl.istというサイトがありますので、こちらを参考にしてみてください。変更したら、上書き保存をすると設定内容が反映されます。4.CSSファイルのフォーマット・拡張子・保存先を指定する「Formats」Sassはフォーマットを指定してコンパイルしたり、コンパイル後に出力されるファイルの拡張子や保存先を指定することができます。設定のFormatsの歯車アイコンをクリックし、続いて「JSONとして設定をコピー」をクリックします。「setting.jsonで編集」をクリックします。開いたsetting.jsonに先ほどコピーした設定をペーストします。]}フォーマットを指定するformatはexpanded・nested・compact・compressedの4パターンの指定方法があります。bold;}デフォルトではこのような形で出力されます。}少し改行が詰まったような感じになりました。}プロパティと値が一行にまとめられました。span{font-weight:bold;color:red}改行は一切なくなります。ファイル拡張子を指定するextensionNameはファイルの拡張子を指定する項目です。通常のファイルは.cssという拡張子を付けますが、圧縮されたCSSファイルには.min.cssのような拡張子を付けることがあります。変更したい場合はextensionNameの値を「.min.css」と書き換えましょう。ファイルの保存先を指定するsavePathはCSSの保存先のディレクトリを指定します。デフォルトではnullということで、設定なしになっています。指定したい場合はsavePathの値を「"/dist/css"」のような内容に書き換えましょう。5.ソースマップを出力する「generateMap」ChromeのデベロッパーツールでSassから生成されたCSSを確認すると、もともとSassのどのファイルの何行目にその内容が書かれていたのかわからなくなってしまいます。それをわかるようにしてくれるのがソースマップと呼ばれるファイルです。Compileはデフォルトの設定ではソースマップのファイルを出力するようになっています。「.css.map」という拡張子が付いたファイルがソースマップです。*/`という記述があり、ここからソースマップを辿れるようになっています。ソースマップがある場合はデベロッパーツールでscssファイルの行数が表示されます。出力をしたくない場合はこの項目の値をfalseで指定します。Compileのオプション設定を変更して利用しましょう。