Codeは初心者でも扱いやすく、拡張機能の追加が簡単なので使いやすいようにするためのカスタマイズが簡単に行えるというメリットがあります。CodeでSass(Scss)記法を使ってコーディングするための初期設定方法をご紹介していきたいと思います。Code)はMicrosoftが提供するプログラミング、コーディング用のテキストエディタです。拡張機能を簡単に追加することができたり、初心者にも扱いやすいという理由で多くの人に使われている人気のツールです。CodeSassとはSassとは「CSSのメタ言語」と呼ばれるもので、CSSをより便利に記述するための言語です。CSSよりもコードの記述を短く済ませることができ、それによって作業効率の向上と管理しやすいコードを記述することができます。Web制作会社などでは、CSSをそのまま記述していることはあまりなく、SassやPostCSSを使ってCSSコードを記述している場合がほとんどです。Sassはとても魅力的ですが、「コンパイル」という処理によってCSSに変換しなければならず、システムにあまり詳しくない人にとってはSassをコンパイルするための環境構築が少し大変です。Codeであれば手軽に環境を作ることができるため、初心者の方でも簡単にSassによるWebコーディングを始めることができます。脱初心者!Sass記法の入門Sassというキーワードは知っていても、まだSassを使ってCSSを記述できていない方も多いのではないでしょうか。CodeでSassを自動でコンパイルするための環境を作る方法をご紹介していきます。言っても手順はとても簡単で、下記の2つだけです。Codeが入っていない場合は、まずインストールから始めましょう。Codeは公式サイトから無料でダウンロードしてインストールすることができます。Mac、Windowsのどちらも対応しています。下記のページからインストールしてください。Codeを開くと、下記のような画面が表示されます。画面の一番左側にアイコンが並んでいますが、一番下のアイコンをクリックすると拡張機能のメニューが表示されます。Compiler」と入力してください。Compiler」を選択して、緑色の「Install」ボタンをクリックすれば、拡張機能の追加が完了です。Compilerを使って実際にコンパイルを行う方法をご紹介していきます。Sass」という項目が追加されます。これをクリックすれば、Sassの監視が開始され、ファイルを保存した時にコンパイルしたCSSファイルが出力されるようになります。.scss(.sass)形式でファイルを作成して、その中にSassでスタイルを記述し、ファイルを保存すると、下記の画像のようにcssファイルが出力されます。ファイルの中身もきちんとコンパイルされていることが分かりますね。Server」という拡張機能を追加すると、ファイルを保存すると自動でブラウザ上の表示に最新のコードが反映されるようになります。Server」をインストールしてください。Live」というボタンをクリックすると、ローカルサーバーが起動して、ブラウザに作成中のページが表示されます。Serverを使用すると相対パスでCSSファイルやJavaScriptファイルの呼び出しができるようになります。Compilerは、初期設定でSassファイルと同じ場所にCSSファイルが出力されるようになっていますが、設定を変更することでCSSファイルを出力するフォルダを自由に変えることができます。下記のように設定を追加すると、cssファイルの保存先がルートディレクトリの「css」というフォルダに変更されます。"/css/"}]詳しくは公式サイトに書かれているので、そちらを参考にして設定を変更してみてください。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。