Code(VSコード)で超簡単にScssとSassの環境を作成する方法を紹介します。WEB制作系の勉強をしている人はSCSSの技術は必須になってきます。その環境作成で挫折する人が多いのが現状です。そんな時は、今回紹介する方法で超簡単に環境作成しましょう。CodeでSCSSの環境作成する方法はプラグインをインストールするだけです。Compilerというプラグインをインストールすれば、Scss特有のコンパイルという作業を自動で行ってくれます。Compilerをインストールしたら、次の「使い方」で多少の設定があるので、そこはしっかり行って下さい。Compilerの右側にある⚙マークをクリックして下さい。そこにある「拡張機能の設定」をクリックして設定ページに移動して下さい。この設定ページの一番上にある「Autoprefix」の設定の左側にある⚙マークからJSONとして設定をコピーをクリックして下さい。その項目の枠にある「setting.jsonで編集」をクリックして下さい。出てきたページにコピーしたJSONをペーストします。設定ページに戻って、「Formats」の項目でも同じことをします。(⚙マークをクリック→JSONコピー→setting.jsonで編集→ペースト。)するとsetting.jsonでは、こんな感じの記述になります。実際に書かれているコードは以下です。{}や,を忘れないように。"/css/"}]}1~7行目は「日本国内のシェアが1%以上」または「最新バージョンから数えて2つまで」という条件のブラウザに対応したベンダープレフィックスを自動で付けますといった意味です。その下からは、出力するフォーマット名と保存場所です。「expanded」は整形された形での出力で、「compressed」は圧縮された形での出力になります。今回はstyle.cssとstyle.min.cssが作成されます。Compilerの使い方(コンパイル)ここまでの設定がちゃんと出来ていれば、自動でコンパイルがされます。実際に機能しているか確認しましょう。今回は、以下の適当に作成したindex.htmlでテストします。css/style.cssを読み込んでいますが、style.cssはまだ存在していません。</body></html>index.htmlの見た目まずは、ファイルの構造を以下のようにして下さい。cssフォルダの中には何も入っていません。scssフォルダの中には.scssの拡張子でファイルを用意します。style.scssには、以下のように書いています。これがコンパイルされるか試してみます。正常に動作すれば、先程の設定で指定したCSSファイル内にstyle.cssとstyle.min.cssが追加されるはずです。Sass」をクリックして下さい。するとファイル内に自動でstyle.cssなどが追加されます。なれば成功です!!おめでとうございます!!実際にstyle.cssを見てみるとscssで書いたのが綺麗にコンパイルされています。実際に出力されたCSSコードは以下です。*/そしてCSSを読み込んでいるindex.htmlは、もちろんこうなります。Compiler)」でした。本来ややこしい作業が入るはずですが、プラグインを使えばここまで簡単に環境を作れます。WEB制作においてscssは重要なので今回の方法でいいので、この環境は作っておきましょう。次の記事では、Scssの書き方についてを紹介しています。環境構築が出来たら実際に書いてみましょう。今回は、SCSSの書き方について前編後編に分けて初心者にも分かりやすく詳しく説明していきます。今回の記事を一通り理解出来れば以下のようなコードを書けるようになります。学習時間は約3時間程度で済むレベルです。その割にかなり重宝される技術なので必ずマスターしましょう。