他人の書いたCSSは読むのが大変って思ったことありますよね。

きちんとガイドラインが決められているCSSならまだしも、
複数のコーダーが関わったものや、修正が繰り返されたものなんて、
ルールもバラバラ、順番もあやふや。

そんなCSSの書き方を根本から変えるツール、
「CSS SERVER-SIDE PRE-PROCESSOR」です。


たとえば、こんなHTMLがあったとしましょう。

<ul class="test">
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
</ul>

これにスタイルを書くときは、こういう風に書きますよね

ul.test { list-style: none; }
ul.test li.one { font-size: 1em; }
ul.test li.two { font-size: 2em; }
ul.test li.three { font-size: 3em; }

それをこんな風に書いちゃうことができます。

ul.test
{
    list-style: none;
    li.one { font-size: 1em; }
    li.two { font-size: 2em; }
    li.three { font-size: 3em; }
}

つまり階層構造のままに記述することができるということ。
なぜこんなことができるようになるかというと、秘密はこのファイル。
http://www.shauninman.com/assets/downloads/sspp-v004.zip

難しいことはありません、上記ZIPファイルを解凍すると、

+ .htaccess
+ cache/
    + .htaccess
    + cacheer.php
+ cache.php

↑こんなファイルが現れますので、これらをサーバーにアップ。
さらにcacheフォルダのパーミッションを“777”に。

あとは自分で書いたCSSをアップするだけ。

こんな風に書いても･･･

ul.test
{
    list-style: none;
    li.one { font-size: 1em; }
}

こんな風に出力されます。

ul.test { list-style: none; }　
ul.test li.one { font-size: 1em; }

しかも改行や余計な空白などを削って出力してくれますので、
容量も軽くなります。

説明が長くなりましたが、
実際やってみるとどういうことかすぐに分かります。

必要な動作環境は、.htaccessが使えて、PHPが稼動するということくらいですから、
導入もしやすいのではないでしょうか。

http://www.shauninman.com