【Eclipse】SASS・SCSSのコーディング環境を整える

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

この記事では、EclipseでSASS・SCSSのコーディング環境を整えるための手順について解説してゆきます。



▼この記事を書いたひと

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

EclipseでSASS・SCSSのコーディング環境を整える方法

Eclipse

JavaやPHPなどのプログラム開発の用途で広く利用されているIDE(統合開発環境)の『Eclipse(エクリプス)』。そんなEclipseで快適にSASS・SCSSをコーディングするには、プラグインの導入や各種設定が必要となります。



そこで今回は、EclipseでSASS・SCSSのコーディング環境を整えるための手順についてくわしく解説してゆきます。



▼今回紹介する内容

  • SASS・SCSSエディターの導入手順
  • SASS・SCSSのコンパイル環境の導入手順
Eclipseでもフロントエンド開発も出来る様にしてゆきましょう!

EclipseやSASS・SCSSが知りたい方へ

今回の記事で使用している『Eclispe』のインストール方法や使い方が知りたい方には、次の記事が参考になります。

SASS・SCSSのインストール方法や基本的な使用方法が知りたい方には、次の記事が参考になります。


SASS・SCSSのエディターを導入する

SASS・SCSSのエディターを導入する方法

Eclipseで開いたSASS・SCSSファイルの内容にハイライトがつく様にするために、専用のテキストエディターの導入を行います。

今回は『LiClipseText』というEclipseのプラグインを使用した方法を紹介します。

LiClipseTextについて

LiClipseText
EclipseプラグインのLiClipseText

▼公式サイトはこちら

LiClipseText※クリックすると別ウィンドウで開きます



LiClipseTextはEclipseのプラグインとして利用する事ができるテキストエディターで、Eclipseに導入することで、以下の言語のハイライト表示に対応させることが出来ます。

▼LiClipseTextの対応言語
C/C++、CSS、CoffeScript、CMake、Dart、Django Templates、Go、HTML、Java、JavaScript、Jinja2、Julia、JSON、Kivy Language、Linux Shell files、Mako Templates、Markdown、Nim、PERL、PHP、Python、RAML、RobotFramework、RST (ReStructured Text)、Ruby、SCSS、StringTemplate、Swift、TypeScript、Windows bat files、XML、YAML

LiClipseTextをインストールする

LiClipseTextは『Eclipseマーケットプレース』を通してインストールをしてゆきます。



Eclipseマーケットプレースの詳しい使い方や、インストール方法については次の記事が参考になります。

Eclipseマーケットプレースを開いて『liclipse』と検索をしましょう。するとリストに『LiClipseText』が出てきますので、そのままインストールをします。

LiClipseTextのインストール①

LiClipseTextをインストールして、Eclipseを再起動すればプラグインの導入作業は完了です。



最後にSASS・SCSSファイルにハイライトが利くようになったかを確認してみましょう。SCSSファイルを開くと、次の様にハイライトされていることが分かります。

scssファイルにハイライトがついた状態
SCSSファイルのハイライト

ファイルの関連付けを設定する

LiClipseTextをインストールするといくつかのファイルが自動でLiClipseTextのエディターに関連付けされます。



これらファイルの関連付けについては、Eclipseの設定ウィンドウの『一般⇒エディター⇒ファイルの関連付け』から変更することが出来ます。

LiClipseTextの設定②
Eclipseのファイルの関連付けの設定
ファイルの種類によっては標準のエディターや他のエディターで開きたい場合もあると思います。そういった場合にはここから変更する様にしましょう。

SASS・SCSSのコンパイル環境を導入する

SASS・SCSSのコンパイルについて

EclipseにはSASS・SCSSのコンパイルを行う機能はありませんが、かわりにコンパイラを素早く呼び出せるようにしておく事ができます。

具体的にはコンパイルなどのSassコマンドをまとめたバッチファイル(もしくはシェルスクリプト)を作成しておき、それをEclipseのプロジェクト・エクスプローラーから実行するという方法です。

バッチファイル・シェルスクリプトの作成方法

まずはSASS・SCSSのコマンドをまとめたバッチファイル、もしくはシェルスクリプトを用意してゆきましょう。



バッチファイル・シェルスクリプトの作り方については次の記事が参考になります。

ファイルを作成したらEclipseのプロジェクト内のフォルダに配置します。

Eclipseからバッチファイル・シェルスクリプトを実行する

バッチファイル・シェルスクリプトの作成と設置が完了したら、あとはEclipseのプロジェクト・エクスプローラーからファイルを実行すればSassのコンパイラが呼び出せます。

Sass用のバッチファイル
設置したバッチファイル・シェルスクリプトがプロジェクトエクスプローラー上に表示されない場合は、F5キーを押してリフレッシュを行いましょう。
以上でEclipseにSASS・SCSSのコンパイル環境を導入する方法の解説は終わりです。

この記事のまとめ

今回は、EclipseでSASS・SCSSのコーディング環境を整えるための手順について解説を行いました。



▼この記事で解説した内容

  • SASS・SCSSエディターの導入手順
  • SASS・SCSSのコンパイル環境の導入手順
EclipseでSASS・SCSSを使用したフロンエンド開発を行う際には、ぜひ参考にしてみて下さいね!

関連記事

最新記事