VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め

VSCode(Visual Studio Code)でSASS/SCSSファイルをコンパイルする拡張機能「Easy Sass」が便利だったので紹介します。

この拡張機能「Easy Sass」は便利なのですが、一番の恩恵はこの拡張機能を利用することで、スタイルシート言語の「SASS/SCSS」の導入が簡単になることです。通常であれば「SASS/SCSS」で書かれたファイルを通常のスタイルシートにコンパイル（変換）するには「Ruby」などを使用する必要があり、変換する環境を整えるのが面倒でもありました。しかし、この拡張機能「Easy Sass」を使えば、保存時に自動的にCSSファイルに変換してくれるので、簡単に「SASS/SCSS」を導入することができます。「SASS/SCSS」を導入することで大幅にコーディングの作業効率とスタイルシートの保守性が向上するので、まだ未導入の方は、ぜひ「SASS/SCSS」の導入を検討してみてはいかがでしょう。

1 VSCodeの拡張機能「Easy Sass」を導入すると何が便利なのか
2 「SASS/SCSS」とは？
3 VSCodeの拡張機能「Easy Sass」のインストール方法
4 VSCodeの拡張機能「Easy Sass」の使い方
5 VSCodeの拡張機能「Easy Sass」のコマンド
- 5.1 Compile all SCSS/SASS files in the project
6 VSCodeの拡張機能「Easy Sass」の設定
7 まとめ

VSCodeの拡張機能「Easy Sass」を導入すると何が便利なのか

先ほど書いたようにVSCodeの拡張機能「Easy Sass」を導入すると保存した際に自動的に「SASS/SCSS」から「CSS」に変換してくれます。「Ruby」や「ターミナル操作」などを介さずに自動的に変換してくれるので、何も考えなくても保存するだけでいいんです。また「CSS」に変換する際に通常のスタイルシートの他に、軽量化されたいわゆる「min.css」も同時に作成してくれます。他に「自動保存の有無」、「出力するファイルの拡張子と書式」、「保存場所」、「コンパイルするファイルを正規表現で除外」を設定（後述）することができます。

VSCode自体、「SASS/SCSS」の補完入力やシンタックスには初期状態で対応していますが、フォーマット整形には対応していないので、フォーマット整形にも対応させたい場合には下記の拡張機能もインストールしておけば良いでしょう。

「SASS/SCSS」とは？

当たり前のように「SASS/SCSS」を活用している人もいれば、まだ「SASS/SCSS」を導入していない、もしくは「SASS/SCSS」のことが何か全く知らないコーダーの方もいると思いますので、簡単に「SASS/SCSS」について紹介したいと思います。

「SASS/SCSS」とは、一言で言えばスタイルシートを効率よく書くことができるようにするために記法です。厳密に言えば「SASS」記法と「SCSS」記法の二種類があります。ここではより通常の「CSS」の書き方に近い「SCSS」記法について簡単に紹介したいと思います。

下記で紹介しているもの以外にも「セレクタの継承」や「関数」「引数」などもあり、詳しくはまた別記事で紹介できればと思います。

「SASS/SCSS」だと四則演算ができる

「SASS/SCSS」だと四則演算ができるので12分割のカラムなどを作るのもあっという間です。加算（+）、減算（-）、乗算（*）、除算（/）、剰余（%）に対応しています。

.col-1 {
    width: (100% / 12);
}

.col-6 {
    width: (100% / 2);
}

.col-1 {
  width: 8.33333%;
}

.col-6 {
  width: 50%;
}

後述のループと組み合わせれば12分割カラムを１つの計算式で作ることもできます。

@for $i from 1 through 12 {
    .col-#{$i} {
        width: (100% / ( 12 / $i));
    }
}

.col-1 { width: 8.33333%; }
.col-2 { width: 16.66667%; }
.col-3 { width: 25%; }

/* 中略 */

.col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }
.col-12 { width: 100%; }

「SASS/SCSS」だと変数が扱える

「SASS/SCSS」だと変数を扱えるのでサイト内でメインになる色や決められたサイズのものがある場合に共通の値として使うことができます。元を変更すれば変数を入れた部分も変わるので、あとでメインの配色が変わっても一括で変更することができます。

$main-color: #337eee;
$base-space: 30px;

h1.title{
  color: $main-color;
  font-size: 2rem;
  margin-bottom: $base-space / 2;
}

.info{
  width: 80%;
  margin-bottom: $base-space;
}

h1.title {
  color: #337eee;
  font-size: 2rem;
  margin-bottom: 15px;
}

.info {
  width: 80%;
  margin-bottom: 30px;
}

「SASS/SCSS」だとループができる

「SASS/SCSS」だとループができるので繰り返し処理を簡単に記述でき、またIDやClassに変数を入れることもできる。

@for $i from 1 through 3 {
  .info-box:nth-of-type(#{$i}) {
    background-image: url(../../img/info-bg-#{$i}.jpg);
    margin-bottom: $base-space * $i;
  }
}

.info-box:nth-of-type(1) {
  background-image: url(../../img/info-bg-1.jpg);
  margin-bottom: 30px;
}

.info-box:nth-of-type(2) {
  background-image: url(../../img/info-bg-2.jpg);
  margin-bottom: 60px;
}

.info-box:nth-of-type(3) {
  background-image: url(../../img/info-bg-3.jpg);
  margin-bottom: 90px;
}

「SASS/SCSS」だとネストができる

「SASS/SCSS」だとネストができるのでテーブルのスタイルやページごとに変更するスタイルもこのように簡単に書けます。

table.sample {
    border: 1px solid #ccc;
    th {
        text-align: center;
    }
    td {
        text-align: left;
    }
}
#page-info {
    h2 {
        color: $main-color;
    }
    .content {
        background-color: #ccc;
    }
}

#page-guide {
    h2 {
        color: #333;
    }
    .content {
        background-color: #9ed2e7;
    }
}

table.sample {
  border: 1px solid #ccc;
}

table.sample th {
  text-align: center;
}

table.sample td {
  text-align: left;
}

#page-info h2 {
  color: #337eee;
}

#page-info .content {
  background-color: #ccc;
}

#page-guide h2 {
  color: #333;
}

#page-guide .content {
  background-color: #9ed2e7;
}

「SASS/SCSS」だとミックスインができる

「SASS/SCSS」だとミックスインができるので、定形のスタイルがある場合にベースとなるスタイルを先に設定しておくことで、他のクラスに挿入することができます。

@mixin box-padding {
    .base-box {
        padding: 15px;
    }
    .base-box>p {
        margin-bottom: 10px;
    }
}

#info {
    @include box-padding;
}

#info .base-box {
  padding: 15px;
}

#info .base-box > p {
  margin-bottom: 10px;
}

「SASS/SCSS」だと関数で色も簡単に変えられる

「SASS/SCSS」だと関数で色も簡単に変えられます。「lighten」は指定した分明るく、「darken」は暗く、「saturate」は彩度を上げることができます。色に関するものだけでなく、この他にも様々な関数が用意されてます。

.sample-box.light {
    color: lighten($main-color, 30%)
}

.sample-box.dark {
    color: darken($main-color, 30%)
}

.sample-box.colorful {
    color: saturate($main-color, 30%)
}

.sample-box.light {
  color: #c0d7fa;
}

.sample-box.dark {
  color: #0a397e;
}

.sample-box.colorful {
  color: #227bff;
}

VSCodeの拡張機能「Easy Sass」のインストール方法

VSCodeの拡張機能より「Easy Sass」と検索すれば先頭に出てくるので、それをインストールしましょう。または下記のリンクよりインストールしてください。

VSCodeの拡張機能「Easy Sass」の使い方

基本的には「.sass」「.scss」の拡張子を持つファイルを保存するば自動的にCSSファイルが出力されます。また初期状態では通常のスタイルシートの他に、軽量化されたスタイルシートも同時に作成されます。軽量化されたファイルは「.min.css」という拡張子になります。

VSCodeの拡張機能「Easy Sass」のコマンド

コマンドパレットから呼び出せる「Easy Sass」のコマンドは下記のものだけになります。

Compile all SCSS/SASS files in the project

上記のコマンドを実行することで選択したフォルダ内にある「.sass」「.scss」の拡張子を持つファイルをコンパイルすることができます。

VSCodeの拡張機能「Easy Sass」の設定

ここではVSCodeの拡張機能「Easy Sass」の設定を紹介します。

easysass.compileAfterSave

この設定では保存後の自動コンパイルを有効または無効を切り替えることができます。

// 自動保存を有効
"easysass.compileAfterSave": true

// 自動保存を無効
"easysass.compileAfterSave": false

easysass.formats

この設定では書き出しするファイルの書式と拡張子を変更することができます。出力するフォーマットは「nested」、「expanded」、「compact」、「compressed」の中から選ぶことができます。「nested」はネストを維持したまま出力されます。「expanded」は通常のスタイルシートのように出力されます。「compact」は通常のスタイルシートのように出力されますが、全ての指定が一行ずつになります。「compressed」は可読性は無くなりますが、もっとも軽量化された出力になります。

  "easysass.formats": [
    {
      "format": "expanded",
      "extension": ".css"
    },
    {
      "format": "compressed",
      "extension": ".min.css"
    }
  ]

easysass.targetDir

この設定では出力するCSSファイルのディレクトリを指定することができます。

"easysass.targetDir": "(PATH)"

easysass.excludeRegex

この設定ではコンパイルするファイルを正規表現を用いて除外することができます。

"easysass.excludeRegex": "正規表現"

// 下記の指定であれば、ファイル名の先頭にアンダーバーのあるファイルはコンパイルの対象とならない。
"easysass.excludeRegex": "^_+"

まとめ

スタイルシートをコーディングする際に「SCSS/SASS」を導入すれば作業効率と保守性が大幅に向上させることがきっとできるでしょう。まだ「SCSS/SASS」を使用していない方がいればこれを機会にぜひ導入してみてはどうでしょう。このVSCodeの拡張機能「Easy Sass」があれば「SCSS/SASS」のコンパイル環境も必要ありませんからね。