ProgrammingHTML/CSS過去記事
過去記事

Linux環境でSassを利用する

SassとCompassのインストール方法（CentOS）

SassとCompassはRuby上で動くプログラムなので、Rubyや関連プログラムをインストールしておく必要があります。
Linux系OSの場合、Ruby はインストール済みの場合が多いので、ターミナルで以下のコマンドを発行してインストール済みかを確認します。

yum list installed | grep ruby

Ruby以外にも必要なプログラムがあるので、下記もインストール済みか確認すると良いでしょう。

yum list installed | grep ruby-devel
yum list installed | grep rubygems
yum list installed | grep gcc

バージョン情報が出力されなかったものはインストールされていないので、yum を使ってインストールします。

sudo yum install ruby
sudo yum -y install ruby-devel
sudo yum install rubygems
sudo yum install gcc

gemを更新します。

sudo gem update --system

gem はRuby言語用のパッケージ管理システムです。
このgem を使って Sass と Compass をインストールします。 

sudo gem install compass 
sudo gem install sass

正常にインストールできたか、下記コマンドで確認します。
下記コマンドでバージョン情報が出力されたら成功です。 

sass -v
compass -v

下記コマンドで、Compassが管理しているSCSSファイルを監視し、更新があればCSSファイルを出力することができます。

compass watch

監視を終了するには [Ctrl] + [c] です。

リモート環境でSCSSファイルを更新

リモート環境に接続して、SCSSファイルを更新するには、コマンドラインを使って編集する方法と、WindowsであればWinSCPなどを使って編集する方法があります。
WinSCPを使うと、普段Windows上で利用しているエディタがそのまま使えるので便利です。

ここでは、WinSCPとAtomを使ってサーバのファイルを更新する方法を紹介します。

WinSCPのインストールと設定

WinSCPのインストールと設定は次のような手順で行います。

  1. 公式サイトからWinSCPをダウンロードする
  2. ダウンロードしたファイルを実行し、WinSCPをインストールする
  3. 接続したいサーバの設定を行う

WinSCPでサーバに接続することができたら、次はWinSCPから起動するエディタの設定を行います。
デフォルトでは、WinSCP上のファイルをダブルクリックするとテキストファイル関連はWinSCPに内蔵されているエディタでオープンされますが、次の手順で好きなエディタに変更できます。

  1. WinSCPのメニューから[オプション]-[環境設定]を選択します。
    環境設定ダイアログが表示されます。
  2. 左カラムから[エディタ]を選択します。
    右カラムがエディタの設定関連パネルに切り替わります。
  3. [エディタの設定]枠内にある[追加]ボタンを押します。
    [エディタの追加]ダイアログが表示されます。
  4. ラジオボタンから[外部エディタ]を選択し、[参照]ボタンを押します。
  5. 使いたいエディタの実行ファイルを選択し、[開く]ボタンを押します。
  6. 環境設定のダイアログに戻り、選択したエディタが表示されているか確認します。

上記手順で、次からファイルをダブルクリックしたり、右クリックから編集を選ぶと追加したエディタが使われるようになります。

リモート側で compass watch を実行していた場合、そのプロジェクト内のSCSSファイルを更新するとCSSファイルが自動的に出力されるようになります。

関連記事