phpでscssを使う

phpでscssを使いたくなった。

１)scssからcssに変換(scssphp)
2)scssを作成、更新したらcssファイルを自動生成(fsniper,bash)

1) scssからcssに変換

scssphp

wget http://leafo.net/scssphp/src/scssphp-0.0.7.tar.gz
tar -zxvmf scssphp-0.0.7.tar.gz

scssからcssに変換

a.scss

# main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

$scssphp/pscss < a.sccs > a.css

a.css

# main p {
  color: #0f0;
  width: 97%; }
  #main p .redbox {
    background-color: #f00;
    color: #000; }

scssからcssへ変換成功

2) scssを作成、更新したらcssファイルを作成

fsniper

fsniperは、新規または変更されたファイル用のディレクトリを指定された一連のモニタツールです。次に、[ファイルの種類または名前に基づいて、そのファイル上で実行するスクリプトを呼び出します。ディレクトリinotifyを使用して、変更を簡単に継続的にポーリングそれらの代わりに監視されます。一般的な使用のWebブラウザからのすべてのものを1つのダウンロードディレクトリを作成し、準決勝を持つインテリジェントスクリプトをどのよう、これらのファイルとは何の図が含まれます。スクリプトに自分自身を記述します。

http://sourceforge.jp/projects/freshmeat_fsniper/
fsniper インストール(自分で書きました)

~/.config/fsniper/config

watch {
    /home/stylesheets {
        # matches all file with .pdf extension in /var/www/upload directory.
        *.scss {
            handler = /home/sh/mvscss.sh %F
        }
    }
}

mvscss.shを作成

mvscss.sh

# !/bin/bash

HOME="${HOME}"
CSSDIR='css'
STYLESHEETDIR='stylesheets'
PSCSS="${HOME}/scssphp/pscss"
OWNER=owner

if [ $# -ne 1 ];then
    echo "usage  mvsccs.sh scssfile"
    exit
fi
FILE=$1
if [ ! -f ${HOME}${STYLESHEETDIR}/${FILE} ];then
    echo "file not found"
    exit
fi
# SCSSファイル名からCSSファイル名を作成
FILENAME=`echo ${FILE} | sed 's/\(.*\)\.scss$/\1.css/g' `
# SCSSからCSSへ変更
${PSCSS} < ${HOME}${STYLESHEETDIR}/${FILE} >${HOME}${CSSDIR}/${FILENAME}

# ファイル所有権の変更
chown ${OWNER}:${OWNER} ${HOME}${CSSDIR}/${FILENAME}

fsniperを再起動

# service fsniper restart

確認

ログを確認

tail -f ~/.config/fsniper/log

テストファイルを作成

$cd stylesheets
$vi a.scss
# main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

ログを見ると↓が出る

YYYY-MM-DD HH:MM:SS Executing: /home/mvscss.sh a.scss

作成されたa.cssを確認

$cd css
$vi a.css
# main p {
  color: #0f0;
  width: 97%; }
  #main p .redbox {
    background-color: #f00;
    color: #000; }

成功