11:59パーマリンクCSSを拡張して記述できるものと言えば、SassとLESSが有名ですね。これらはHTML/CSSフレームワークなどでも使われていたり、日本語での解説も多くあります。Crush」の簡単な説明をしてみたいと思います。誤解のないように言っておきますが、これは「Rubyとか入れなくてもいいしこっち使おうぜ」という内容の記事ではありません。いうものもある、という程度に見ておくといいかもしれません。この記事内の解説は公式ドキュメントを簡単にまとめたものです。詳しく見たい方は公式サイトをご覧ください。Preprocessor「ショートカット志向サーバーサイドCSS3プリプロセッサ」とタイトルに書かれています。PCSSではどんなことができるのか。その特徴を見てみます。PCSSが動作するにはPHP5が必要となります。事前定義されたCSSの定数とPCSSの関数によって、より直感的にCSSが書けるようになり、コードがスリム化され読みやすくなります。classの入れ子ができます。あらゆる種類のデータを格納できる変数があります。デフォルトの単位とデフォルトの画像ディレクトリを事前定義された関数にセットすることができます。サーバーサイドでブラウザを検出することで@font-faceのコードをスリム化して出力するショートカットがあります。CSSは圧縮されて出力されます。ウェブサイトのディレクトリに置いて、普通のCSSファイルと同じように<link>や@importで読み込むことです。url(pcss.php?css=file.css);</style>これは最も簡単な導入方法ですが、PCSSを利用した他の方法もあります。次に説明するのは複数のCSSファイル(実際にはPCSSファイル)を1つのCSSファイルに出力するのに向いている方法です。mod_rewriteが有効な環境で.htaccessに下記を記述することにより、よりフレンドリーなURLにすることができます。pcss.php?css=$1この場合、file.p.cssでpcss.php?css=file.pcssと同様のファイルを呼び出すことができます。これはカスタマイズ可能です。[value];文字列の先頭に&をつけることで変数として指定できます。値は=(等号)で代入します。末尾の;(セミコロン)は任意です。float:left;デフォルト値の定義デフォルトの単位と画像ディレクトリを定義します。デフォルト画像ディレクトリはBGIMGPCSS関数で使用されます。以下のように指定します。[dirname]指定例は次の通りです。../これらの指定が見つからない場合、imgdirは空、unitにはpxが指定されます。ディレクトリ名の最後にスラッシュは必要ありません。@font-faceショートカット@font-faceを簡単に指定することができます。[fontfiles]以下はその例です。dir/myfont-fileこれは次のように出力されます(フォーマットはされません)。format('truetype');}classの入れ子classは入れ子で指定することができます。}}これは次のように出力されます。none;}多くのclassを入れ子にすればするほどCSSは大きくなるので気をつけてください。サーバーサイドコメントPCSSの中では、スラッシュを2回続けて書くことでPHPのようにコメントを書くことができます。ここはコメントですこのコメントはCSSに出力されません。事前定義された定数により、一部のセレクタや指定を短く書くことができます。HIDE;}これは以下のように出力されます。none;}セレクタの定数は次のようなものです。HIDE;}これは以下のように出力されます。none;}他にも様々な定数があります。reference」を参照してください。これらの定数は自分で作ることもできます。関数はCSSのように記述でき、CSSより短く、ブラウザごとに最適化されたCSSを書き出すことができます。FSIZE:14;}これは以下のように出力されます。14px;}FSIZEはfont-sizeの短縮形で、デフォルトの単位がpx(または指定されていない)だとこうなります。次の例を見てましょう。10;}これは以下のようになります(デフォルト単位がpxの場合)。10px;}BOUNDS関数はmarginとpaddingを一度に指定できます。BGIMG:someimage.png;}結果は次の通り。url(images/someimage.png);}BGIMGはbackground-imageの短縮形です。imgdirを定義してあれば、このように更に短く書くことができます。#000;}これはFirefoxでページを見た場合、次のように出力されます。9以下で見た場合は次のようになります。linear-gradiennt()の短縮形です。この指定はサーバーサイドでブラウザを判別し、ブラウザごとに最適化されたコードを出力します。ROTATE関数も同じように働きます。reference」を参照してください。PCSSのサイトで使われているPCSSのコードはhttp://pcss.wiq.com.br/pcss.pcssで見ることができます。出力されるのはhttp://pcss.wiq.com.br/pcss.p.cssです。PCSSの簡単な解説をしてきました。Crushをやっていきます。Crush(作者のブログ記事)「拡張性のあるPHPベースのCSSプリプロセッサ」とのことです。それでは機能などを見ていきたいと思います。導入スクリプトをページに組み込み、CssCrush::fileメソッドに処理したいCSSファイルへのパスを指定します。/>また、カスタムオプションを配列として渡すことができます。出力されるファイル名にタイムスタンプのクエリ文字列をつけるかどうか(デフォルトはtrue)));?>ボイラープレートは、生成されるファイルの先頭にある次のような文です。*/この内容はCssCrush.boilerplateというファイルに書かれています。ダイレクト@import@importで呼び出されるファイルは、出力されるファイルに直接書き込まれます。これによりHTTPリクエストを減らすことができます。@importにメディアの指定がある場合は、@mediaブロックで囲んで出力されます。*/}エイリアスエイリアスにより、プロパティのベンダープレフィックスを自動でつけることができます。エイリアスはメインのスクリプトと同じディレクトリのファイルに格納されています。CssCrush.aliasesというファイルですね。エイリアスは編集可能です。border-radiusのエイリアスは次のようになっています。Crushがファイルをコンパイルするときにエイリアスはロードされ、一致する全ての指定に適用されます。10px;}エイリアスはプロパティ以外に、関数にも使えます。no-repeat;}@ルールにも可能です。}}マクロエイリアスが十分でない場合、PHPで書かれたマクロを定義することができます。マクロの指定はCssCrush.macros.phpの中にあります。1;}ファイルの中を見てみたところ、2011年9月2日のバージョンには上記のfilter以外にも以下のようなマクロが指定されていました。rgba(0,0,0,.5);要らないものはコメントアウトしたりして使うように、だそうです。Crushにはシンプルな数学関数があります。math四則演算ができます。数値以外の文字は無視されます。percent第1引数を第2引数で割ったものを返します。roundmathの結果を四捨五入します。floormathの結果を切り捨てします。ceilmathの結果を切り上げします。()のように関数名を省略して書いた場合はmathとして扱われます。URIに変換することができます。変数は、@ルールの文法と同じように指定します。CSSの指定内ではvar関数で変数を使います。repeat-x;}セレクタのグルーピング:any擬似クラスをサポートしています。これはベンダープレフィックス付きではありますが、最新のMozillaとWebKitではサポートされています。4の中には:matchesがあります。Crushが出力するCSSはミニファイ(圧縮)されています。これはオプションでデバッグモードにすることで無効にできます。0;background-color:#fff}ミニファイ時には以下のような変更が行われます。空の指定の削除@importされるファイルも含め、全てのファイルは変更された日時のタイムスタンプが保存され、チェックされます。いずれかのファイルに変更があった場合は、新たにコンパイルされます。何も変更がなかった場合は、キャッシュされたファイルが返されます。Crushファイルはhttp://the-echoplex.net/csscrush/css/global.cssで見ることができます。出力されるのはhttp://the-echoplex.net/csscrush/css/global.crush.cssです。Crushの紹介は以上です。Crushと答えると思います。理由は簡単で、あまりトリッキーなことをしていないので、新しく覚えることが少ないからです。セレクタのネストもあったら嬉しかったんですが......。PCSSは書く量はかなり減ると思うんですが、それをやろうとすると大文字で書かないといけないのが多かったり、新しく覚えるものが多いのが大変そうです。あと、ユーザーエージェントからブラウザを判別して出力するコードを変更するというのがちょっと......。仮にどちらかを使うとしても、ローカルで使って実際のサイトにはコンパイルされたファイルを使うことになると思います。おまけ:SassとLESSのリンク集せっかくなのでメジャーどころの2つがどういうものなのか分かる記事へのリンクをまとめておきます。基本的に日本語で読める記事です。::ハブろぐ他にも検索すればいっぱい出てきますので、色々見てみるといいと思います。Gistどちらもとても分かりやすい比較なので興味のある方は目を通しておくといいかもしれません。Requestを送るIssueを作成するTwitterでメンションする記事を共有TwitterFacebookPocketはてなブックマークLINEコンテンツホームブログこのサイトについて。