WEBデザイナーがマイペースにSCSSを学んでみる（3）

2019.04.18

前々回ではVS Code（Visual Studio Code）のダウンロードとインストール、前回ではVS Codeの日本語化を行いました。かなりのスローペースです。

いまさらながら、ふとSCSSを勉強しようと思います。以前一度挑戦してみたのですが、環境の構築までの敷居がものすごく高くて、途中で面倒臭くなってしまい挫折してしまいました。ただ、知らないよりは知っていた方が良いはずですし、今後フリーランスのWEBデザイナーとして様々な案件に携わっていく中で、「使わない」はまだしも「使えない」はまずいと思ったからです。期限が ...

WEBデザイナーがマイペースにSCSSを学んでみる（2）

前回の続きで、SCSSを勉強するための環境構築を進めます。肝心のSCSSについてはまだ何も触れません・・・今回はVisual Stdio Code（略してVSCodeというらしい）の日本語化です。 VS Codeの表示を日本語にするインストールしただけでは全部英語表記どうも以前のVS Codeではダウンロード時に言語を選択できたようなのですが、現在のも ...

今回はVS Codeでsassをコンパイル出来るようにしていきます。前回はこのコンパイルできるような環境作りのところで挫折したんですよね・・・今回は上手くいくのでしょうか。失敗したらこの記事シリーズもここで終わる可能性があります。そして、もうscssに手を出そうとは思わないようにします。

Live Sass Compilerをインストール

VS Codeでsassをコンパイルするのには、この「Live Sass Compiler」というのが良いらしいです。早速インストールします。

VS Codeを開くと左側にボタンが並んでいます。ここの一番下のボタンをクリックします。

検索窓が出てくるので、そこに「Live Sass Compiler」と入力して検索。その後インストール。

本当にコンパイルされるのか検証

適当なファイルを用意する

さて、当然ですがインストールした後の確認をしなくてはいけません。果たしてscssはきちんとcssにコンパイルされるのでしょうか。

まずは検証用に簡単なファイルを用意します。仮にtest.scssとして下記の内容記述し、scssdemoというフォルダを作成してその中に放り込みます。

.box {
    .item {
      font: {
        size: 50px;
        weight: bold;
      }
    }
  }

これは普通のCSSで書くとこういう風になるとのこと。

.box .item {
  font-size: 50px;
  font-weight: bold;
}

このtest.scssをVS Codeのメニューから開くと、画面の右下に「Watch Sass」というボタンが出てくるのでこれをクリック。

すると、scssdemoというフォルダの中に、test.scssとは別にtest.cssとtest.css.mapというファイルが生成されました。
test.cssの中身を見てみると、scssファイルに書いた内容がきちんと普通のcssとして書かれていることがわかります。これでscssファイルをコンパイル出来ることが確認出来ました。