SASS・SCSSのコマンド操作を省略する方法【Win/Mac対応】

みやしも ローカル開発環境

今回は、SASS・SCSSのコーディングに必要なコマンド操作を省略して、作業環境をより効率的にする方法について解説を行います。



この記事の内容はWindows・Macの両方に対応しています。



▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

SASS・SCSSのコマンド操作を省略する方法

sass・scssの作業環境を快適にする方法

フロントエンドツールの『Sass』を使用したSASS・SCSSのコーディング作業では、CSSに変換するための『コンパイル』という作業が必要です。



しかしこのコンパイルは、コーディング結果を確認するために必ず行わなければならない作業でもあるために、多くの方が作業への煩雑さを感じていると思います。

ただでさえブラウザ更新を頻繁に行うフロントエンド開発。この上で毎回コンパイルをはさむのはさすがに面倒くさい。。

一方ではSassに用意されている『--watch』オプションを使えば手動のコンパイルを省略することも可能ですが、いずれにしてもWindowsならコマンドプロンプト、Macならターミナルといったツールの起動・操作によるコーディングの作業準備が必要になります。

そこで今回は、この様な状況を解決するために、Sassのコマンド操作を省略してSASS・SCSSのコーディングを効率的に始める方法について解説してゆきます。

具体的にはWindows・Macでそれぞれ次のものを使用した方法になります。



▼今回紹介する方法

  • Windows:Sass関連のコマンドをまとめた『バッチファイル』を作成する
  • Mac:Sass関連のコマンドをまとめた『シェルスクリプト』を作成する



分かりやすく言うなら『Sassを起動をするためのショートカット』を作成するといった作業内容になります。

最終的にはクリック操作ですぐにSASS・SCSSのコーディングが開始できる状況が作れますよ!

SASS・SCSSについて詳しく知りたい方へ

SASS・SCSSについて詳しく知りたい。実行環境をインストールする方法が知りたい、といった方には次の記事が参考になります。


Windowsでバッチファイルを作成する

Windows

WindowsでSassの作業を省略可するために『バッチファイル』を使った方法を解説してゆきます。


Windowsのバッチファイルとは

Windowsのコマンドプロンプト

Windowsの『バッチファイル』とは、コマンドプロンプトに実行させたい命令(=コマンド)をまとめたファイルのことをいいコマンドを記述したテキストを『.bat』という拡張子で保存することで作成できます。



バッチファイルが実行されるとコマンドプロンプトが開き、ファイル内のコマンドが一行ごとに、上から順番に実行されることとなります。

このためにもバッチファイルは、一連の作業の中で発生する「繰り返し実行するコマンド」や「同じ内容のコマンド」をまとめることで、Windowsにおける作業の効率化に役立てることが出来ます。
Windowsで『バッチファイル』を作成して、Sass関連のコマンドをまとめてゆきましょう。

Sass用のバッチファイルを作成する

WindowsでSass作業用のバッチファイルを作成してゆきます。以下の内容をテキストファイルにコピーして拡張子を『.bat』で保存しましょう。


▼バッチファイルの内容

cd /d %~dp0
sass --style compressed --watch . --no-cache
pause
exit



するとバッチファイルが作成できます。今回は『develop.bat』という名前でバッチファイルを作成しました。

Windowsで作成したバッチファイル
Windowsで作成したバッチファイル

Sass用のバッチファイルの使い方

バッチファイルを作成したらsassやscssのファイルが置いてある作業フォルダに配置して実行してみましょう。



すると次のようなコマンドプロンプトが立ち上がるとともに、SASS・SCSSのファイルの監視が始まります。またこの状態でSASS・SCSSファイルを変更すると自動でコンパイルが行われる様になります。

Windowsのバッチファイル実行状態
Sass用バッチファイルの実行状態

このほか作業中にはコンパイルのログ表示や、構文エラーとなった際のエラーメッセージなどの確認もする事ができます。

最後にCtr+Cを押すとSASS・SCSSのファイルの監視を終了してコマンドプロンプトが終了します。

以上のように、作成したバッチファイルはSASS・SCSSのコーディング中だけ起動する形で使用すればよく、またこの上では、コマンドプロンプトの起動やSassコマンドを必要とすることなくコーディングが開始できます。

SASS・SCSSのコーディング環境がより効率的になりますね!

以上でWindowsでバッチファイルを作成する方法の解説は終わりです。

Macでシェルスクリプトを作成する

Apple

MacでSassの作業を省略可するために『シェルスクリプト』を使った方法を解説してゆきます。

Macのシェルスクリプトとは

macのターミナル

Macの『シェルスクリプト』とは、ターミナルに実行させたい命令(=コマンド)をまとめたファイルのことをいい、コマンドを記述したテキストを『.sh』という拡張子で保存すれば作成できます。



また、シェルスクリプトが実行されるとターミナルが開き、ファイル内のコマンドが一行ごとに、上から順番に実行される様になります。



この上で『シェルスクリプト』は、一連の作業の中で発生する「繰り返し実行するコマンド」や「同じ内容のコマンド」をまとめる事でMacにおける作業の効率化に役立つ手段となります。

今回はMacでSassのコマンドをまとめて実行するために『シェルスクリプト』を利用してゆきます。
Macで『シェルスクリプト』を作成して、Sass関連のコマンドをまとめてゆきましょう。

Sass用のシェルスクリプトを作成する

MacでSass作業用のシェルスクリプトを作成する方法について解説してゆきます。


まずは任意のディレクトリで以下のコマンドを実行してファイルを作成します。


▼実行コマンド

touch develop.command
chmod u+x develop.command


上記を実行すると実行したディレクトリ上にファイルが作成されます。


今回の例では『develop.command』という名前でシェルスクリプトを作成しました。さらにはファイルを実行できる様にするために、chmodコマンドでアクセス権限も変更しておきます。
▼シェルスクリプトの拡張子について
シェルスクリプトは通常は拡張子が『.sh』ですが、macでは『.command』とすることで画面からダブルクリックで実行できるようになります。
作成したファイルには、次の内容を書き込みます。


▼シェルスクリプトの内容

#!/bin/sh

cd $(dirname $0)
sass --style compressed --watch . --no-cache



以上でシェルスクリプトの準備は完了です。作成したシェルスクリプトはMacの画面上では次のように表示されます。

Macで作成したシェルスクリプト

Sass用のシェルスクリプトの使い方

シェルスクリプトを作成したらsassやscssのファイルが置いてある作業フォルダに配置して実行してみましょう。



すると次のようなターミナルが立ち上がるとともに、SASS・SCSSのファイルの監視が始まります。またこの状態でSASS・SCSSファイルを変更すると自動でコンパイルが行われる様になります。

Macのシェルスクリプトの実行状態

このほか作業中にはコンパイルのログ表示や、構文エラーとなった際のエラーメッセージなどの確認もする事ができます。

最後にCtrl+Cを押すとSASS・SCSSのファイルの監視を終了してターミナルが終了します。

以上のように、作成したシェルスクリプトはSASS・SCSSのコーディング中だけ起動する形で使用すればよく、またこの上では、ターミナルの起動やSassコマンドを必要とすることなくコーディングが開始できます。

SASS・SCSSのコーディング環境がより効率的になりますね!

以上でMacでシェルスクリプトを作成する方法の解説は終わりです。

この記事のまとめ

今回は、SASS・SCSSのコーディングに必要なコマンド操作を省略して、作業環境をより効率的にする方法について解説を行いました。



▼今回紹介した方法

  • Windows:Sass関連のコマンドをまとめた『バッチファイル』を作成する
  • Mac:Sass関連のコマンドをまとめた『シェルスクリプト』を作成する



またこの上では、それぞれの環境での使用方法についても、あわせて解説を行いました。

今回は以上となります。最後までお読みいただきありがとうございました!

関連記事

最新記事