《CSS効率化!》SCSSファイルを自動コンパイルする方法

WEB

SCSSはCSSを効率的に記述できるので本サイトでも使用しています。

導入することでメンテナンス工数を大きく削減することができます。

SCSSからCSSを出力するためのSCSSのコンパイラはいくつかありますが、今回は使い勝手の良いkoalaを紹介します。

ダウンロード

以下からインストーラーをダウンロード。

Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.
Koala is a gui for Less, Sass, Compass and CoffeeScript. Koala can run in windows, mac, and linux.

インストール

① ダウンロードしたインストーラーを実行

② 〔Next〕をクリック

③〔Next〕をクリック

④ 〔Install〕をクリック

⑤ 待ちます

⑥ 〔Finish〕をクリック

セットアップ

koalaを起動後、〔+〕をクリック

コンパイル対象フォルダを選択します。以下の通り手打ちでパスを入力すると、ローカルネットワーク内のsamba公開ディレクトリにもアクセスできます。

scssファイルを右クリックし、コンパイル後のcssファイルの出力先を指定します。

最後に、対象のscssをクリックすると、オプションが表示されます。自動コンパイルにチェックを入れ、それ以外は好みの設定をすればOKです。

これでSCSSファイルを保存すると、アウトプットパスに自動的にCSSファイルが生成されます。

まとめ

koalaは、scssファイルに変更があったら自動で即時コンパイルされるので、かなり使い勝手がいいです。

また、手軽に導入でき、設定もUI上から簡単にできるので、おすすめです。

THIS POST
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
MEMOWEB
SERVER
スターサーバー

当サイトは、安くてハイスペックな、このスターサーバーを使用しています。
スタードメインでドメインを取得すれば、たまったポイントでサーバーが更に安くなります。
◎ オールSSD!高速サーバー環境
◎ 無料で使える!独自SSL機能
◎ 即時プラン変更にも柔軟に対応
◎ 大量アクセスに強いWebサーバー”nginx”
△ データ転送量がロリポップより少ない

ロリポップ

こちらもコスパの良いロリポップ。サポート体制が充実しているのに加え、利用者数も多いので、困ったときの情報はネットに多くあるかもしれません。
◎ データ転送量が多い
◎ 無料独自SSL機能
◎ 充実したサポート体制
△ サーバーストレージはHDD ※DBサーバーのみSSD
△ WebサーバーがApache 2.4.x

エックスサーバー

それなりのアクセス数が見込まれる場合はエックスサーバーがおすすめです。
ただ、値段もそれなりにするので、ブログ開設時には、ここまでのスペックは必要ないかもしれません。
◎ 圧倒的なハイスペック環境
◎ 無料独自SSL機能
◎ 大量アクセスに強いWebサーバー”nginx”
◎ モリサワのWebフォントが無料で使える
△ 低価格プランがない

COLOR CODE