phpでscssを使いたくなった。
1)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; }
成功