CSS記述をスマートにするPHP （CSS Server-side Pre-processor）

スタイルシート中心のデザイン、レイアウトでコンテンツを作成しているとCSS記述が複雑になる。運用中に修正を繰り返しているうちに、スタイルシートが複雑になり思わぬトラブルになりかねない。スタイルシートを少しでもわかりやすく記述しておくことで、こうした問題から開放してくれるのがCSS Server-side Pre-processor。

利用するにはPHPとhtaccessが利用できるサーバ環境が必要になる。ダウンロードファイルをホームデレクトリに設置後、/cache/デレクトリのパーミッションを777に変更すれば利用できる。外部CSSファイルのみ利用でき、HTML、JavaScriptでのスタイル指定には適用されない。

スタイルシートをスマートに記述
下記のように、階層記述が可能になる。

実際の出力は通常のCSSフォーマットになる。

そのほか、スタイルシート中でプロパティの利用やXML形式での記述なども可能になる。CSSファイルに対しパラメータを指定するだけで、プロパティの値を動的に変更することが出来る機能もある。出力されるCSSファイルは、改行コードなど除去されファイルサイズも若干小さくなることから、ブラウザでの読み込み短縮も期待できる。

記述方法などを参考にしながら、実際に利用してみるとその便利さが実感できる。スタイルシートが複雑になり毎回修正で面倒な思いをしている場合、是非一度試していただきたい。