導入

簡単な導入方法は、pcss.php をウェブサイトのディレクトリに置いて、普通の CSS ファイルと同じように <link> や @import で読み込むことです。

<link rel="stylesheet" type="text/css" href="pcss.php?css=file.css" />

または

<style type="text/css">@import url(pcss.php?css=file.css);</style>

これは最も簡単な導入方法ですが、PCSS を利用した他の方法もあります。
次に説明するのは複数の CSS ファイル(実際には PCSS ファイル)を一つの CSS ファイルに出力するのに向いている方法です。

<?php
  include "pcss.php";
  print new PCSS("file1.pcss");
  print new PCSS("file2.pcss");
  print new PCSS("file3.pcss");
?>

Apache の mod_rewrite が有効な環境で .htaccess に下記を記述することにより、よりフレンドリーな URL にすることができます。

RewriteEngine on
RewriteRule ^([a-zA-Z0-9_-]+).p.css$ pcss.php?css=$1

この場合、file.p.css で pcss.php?css=file.pcss と同様のファイルを呼び出すことができます。また、これはカスタマイズ可能です。

変数

&[variable_name] = [value];

文字列の先頭に & をつけることで変数として指定できます。
値は = (等号) で代入します。
末尾の ; (セミコロン) は任意です。

以下はその例です。

&mycolour = #fff;
&floatedbox = display:block; float:left;

デフォルト値の定義

デフォルトの単位と画像ディレクトリを定義します。デフォルト画像ディレクトリは BGIMG PCSS 関数で使用されます。
以下のように指定します。

unit [unit]
imgdir [dirname]

指定例は次の通りです。

/* example 1 */
unit em
imgdir images

/* example 2 */
unit %
imgdir ../

これらの指定が見つからない場合、imgdir は空、unit には px が指定されます。ディレクトリ名の最後にスラッシュは必要ありません。

@font-face ショートカット

@font-face を簡単に指定することができます。

fontface [fontname] [fontfiles]

以下はその例です。

fontface MyFont dir/myfont-file

これは次のように出力されます(フォーマットはされません)。

@font-face {
  font-family: 'MyFont';
  src        : url('dir/myfont-file.eot')  format('eot'),
               url('dir/myfont-file.woff') format('woff'),
               url('dir/myfont-file.ttf')  format('truetype');
}

class の入れ子

class は入れ子で指定することができます。

.class{ BLOCK;
  .subclass{ HIDE; }
}

これは次のように出力されます。

.class {
  display: block;
}
.class .subclass {
  display: none;
}

多くの class を入れ子にすればするほど CSS は大きくなるので気をつけてください。

サーバーサイドコメント

PCSS の中では、スラッシュを2回続けて書くことで PHP のようにコメントを書くことができます。

// ここはコメントです

このコメントは CSS に出力されません。

定数

事前定義された定数により、一部のセレクタや指定を短く書くことができます。

.class{
  HIDE;
}

これは以下のように出力されます。

.class{
  display: none;
}

セレクタの定数は次のようなものです。

.class FILE{
  HIDE;
}

これは以下のように出力されます。

.class input[type=file]{
  display: none;
}

他にも様々な定数があります。詳しくは Constants reference を参照してください。
また、これらの定数は自分で作ることもできます。

関数

関数は CSS のように記述でき、CSS より短く、ブラウザごとに最適化された CSS を書き出すことができます。

.class{
  FSIZE:14;
}

これは以下のように出力されます。

.class{
  font-size: 14px;
}

FSIZE は font-size の短縮形で、デフォルトの単位が px (または指定されていない) だとこうなります。

次の例を見てましょう。

.class{
  BOUNDS:5 10,0 0 10;
}

これは以下のようになります(デフォルト単位が px の場合)。

.class{
  padding: 5px 10px; margin: 0 0 10px;
}

BOUNDS 関数は margin と padding を一度に指定できます。

次は背景画像です。

.class{
  BGIMG:someimage.png;
}

結果は次の通り。

.class{
  background-image: url(images/someimage.png);
}

BGIMG は background-image の短縮形です。imgdir を定義してあれば、このように更に短く書くことができます。

では最後の例です。

.class{
  GRADIENT:#fff #000;
}

これは Firefox でページを見た場合、次のように出力されます。

.class{
  background-image: -moz-linear-gradient(top, #fff, #000); background-image: linear-gradient(top, #fff, #000);
}

Ineternet Explorer 9 以下で見た場合は次のようになります。

.class{
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', EndColorStr='#000');
}

GRADIENT は background-image: linear-gradiennt() の短縮形です。
また、この指定はサーバーサイドでブラウザを判別し、ブラウザごとに最適化されたコードを出力します。ROTATE 関数も同じように働きます。

他の関数については Functions reference を参照してください。

導入

スクリプトをページに組み込み、CssCrush::file メソッドに処理したい CSS ファイルへのパスを指定します。

<?php 
  require_once 'CssCrush.php';

  // この場合、生成または更新されるファイルパスは /css/screen.crush.css となります
  $compiled_file = CssCrush::file( '/css/screen.css' );
?>

<link rel="stylesheet" type="text/css" href="<?php echo $compiled_file; ?>" />

また、カスタムオプションを配列として渡すことができます。

<?php 
  require_once 'CssCrush.php';

  $compiled_file = CssCrush::file( '/css/screen.css', array(
    'debug'       => true,  // ミニファイするかどうか (デフォルトは false)
    'boilerplate' => false, // ボイラープレートを出力するかどうか (デフォルトは true)
    'versioning'  => false, // 出力されるファイル名にタイムスタンプのクエリ文字列をつけるかどうか (デフォルトは true)
));
?>

ボイラープレートは、生成されるファイルの先頭にある次のような文です。

/*
 * CSS Crush(ed) on (時刻)
 * http://github.com/peteboere/css-crush
 */

この内容は CssCrush.boilerplate というファイルに書かれています。

ダイレクト @import

@import で呼び出されるファイルは、出力されるファイルに直接書き込まれます。これにより HTTP リクエストを減らすことができます。
また、@import にメディアの指定がある場合は、@media ブロックで囲んで出力されます。

/* コンパイル前 */
@import "print.css" print;
@import url( "small-screen.css" ) screen and ( max-width: 500px );

/* コンパイル後 */
@media print {
    /* print.css の中身がここに書き込まれます */
}
@media screen and (max-width: 500px) {
    /* 小さいスクリーン向けの CSS ファイルの中身 */
}

エイリアス

エイリアスにより、プロパティのベンダープレフィックスを自動でつけることができます。エイリアスはメインのスクリプトと同じディレクトリのファイルに格納されています。CssCrush.aliases というファイルですね。

エイリアスは編集可能です。たとえば、border-radius のエイリアスは次のようになっています。

border-radius[] = -webkit-border-radius
border-radius[] = -moz-border-radius

CSS Crush がファイルをコンパイルするときにエイリアスはロードされ、一致する全ての指定に適用されます。

/* コンパイル前 */
p { border-radius: 10px; }

/* コンパイル後 */
p {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

エイリアスはプロパティ以外に、関数にも使えます。

/* コンパイル前 */
div { background: #fff linear-gradient( left, red, white ) no-repeat; }

/* コンパイル後 */
div {
    background: #fff -webkit-linear-gradient( left, red, white ) no-repeat;
    background: #fff -moz-linear-gradient( left, red, white ) no-repeat;
    background: #fff -ms-linear-gradient( left, red, white ) no-repeat;
    background: #fff -o-linear-gradient( left, red, white ) no-repeat;
    background: #fff linear-gradient( left, red, white ) no-repeat;
}

@ルール にも可能です。

/* コンパイル前 */
@keyframes myanim {
    0%   { left: 0; }
    100% { left: 100px; }
}

/* コンパイル後 */
@-moz-keyframes myanim {
    0%   { left: 0; }
    100% { left: 100px; }
}
@-webkit-keyframes myanim {
    0%   { left: 0; }
    100% { left: 100px; }
}
@keyframes myanim {
    0%   { left: 0; }
    100% { left: 100px; }
}

マクロ

エイリアスが十分でない場合、PHP で書かれたマクロを定義することができます。
マクロの指定は CssCrush.macros.php の中にあります。

/* コンパイル前 */
p {
    filter: blur( pixelradius=2 ),
            dropshadow( color=#000, offY=1px, offX=2px );
}

/* コンパイル後 */
p {
    filter: progid:DXImageTransform.Microsoft.Blur(
            pixelradius=2 ),
        progid:DXImageTransform.Microsoft.DropShadow(
            color=#000, offY=1px, offX=2px );
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(
            pixelradius=2 ),
        progid:DXImageTransform.Microsoft.DropShadow(
            color=#000, offY=1px, offX=2px )";
    zoom: 1;
}

ファイルの中を見てみたところ、2011年9月2日のバージョンには上記の filter 以外にも以下のようなマクロが指定されていました。

/* コンパイル前 */
display: inline-block;

/* コンパイル後 */
display: inline-block;
*display: inline;
*zoom: 1;

/* コンパイル前 */
min-height: 100px;

/* コンパイル後 */
min-height: 100px;
_height: 100px;

/* コンパイル前 */
clip: rect(1px,1px,1px,1px);

/* コンパイル後 */
clip: rect(1px,1px,1px,1px);
*clip: rect(1px 1px 1px 1px);

/* コンパイル前 */
background: rgba(0,0,0,.5);

/* コンパイル後 */
background: rgb(0,0,0);
background: rgba(0,0,0,.5);

要らないものはコメントアウトしたりして使うように、だそうです。

関数

CSS Crush にはシンプルな数学関数があります。

math

四則演算ができます。使用できる演算子は + – / * () です。
数値以外の文字は無視されます。

percent

第一引数を第二引数で割ったものを返します。

round

math の結果を四捨五入します。

floor

math の結果を切り捨てします。

ceil

math の結果を切り上げします。

() のように関数名を省略して書いた場合は math として扱われます。

/* コンパイル前 */
.column-1 {
    width: percent( 200, 960 );
    font-size: ( 12 / 16 )em;
}

/* コンパイル後 */
.column-1 {
    width: 0.208333333%;
    font-size: 0.75em;
}

また、data-uri 関数を使うことで、相対パスで指定された画像やウェブフォントを自動的に Data URI に変換することができます。

/* コンパイル前 */
ul li {
    background-image: data-uri(../my-bg.png);
}

/* コンパイル後 */
ul li {
    background-image: url(data:image/png;base64,R0lGODlhAQABAIA...);
}

変数

変数は、@ルールの文法と同じように指定します。また、CSS の指定内では var 関数で変数を使います。

/* 変数の指定 */
@variables {
    helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
    brand-blue: #C1D9F5;
}

/* 変数を使う */
ul, p {
    font-family: var( helvetica );
    background: var( brand-blue ) url( tile.png ) repeat-x;
}

セレクタのグルーピング

:any 擬似クラスをサポートしています。これはベンダープレフィックス付きではありますが、最新の Mozilla と WebKit ではサポートされています。
ちなみに、Selectors Level 4 の中には :matches があります。

/* コンパイル前 */
:any( .sidebar, .block ) a:any( :hover, :focus ) {
    color: red;
}

/* コンパイル後 */
.block a:hover,
.block a:focus,
.sidebar a:hover,
.sidebar a:focus {
    color: red;
}

ミニファイとキャッシュ

デフォルトでは CSS Crush が出力する CSS はミニファイ(圧縮)されています。これはオプションでデバッグモードにすることで無効にできます。

/* コンパイル前 */
body {
    padding: 0 0 0 0;
    margin: 20px auto 0px;
    background-color: #ffffff;
}

/* コンパイル後 */
body{padding:0;margin:20px auto 0;background-color:#fff}

ミニファイ時には以下のような変更が行われます。

• margin: 0px; のような指定を margin:0; に
• padding: 0 0 0 0; のような指定を padding:0; に
• 不要な空白を削除
• 最後の指定のセミコロンを削除
• 空の指定の削除

@import されるファイルも含め、全てのファイルは変更された日時のタイムスタンプが保存され、チェックされます。いずれかのファイルに変更があった場合は、新たにコンパイルされます。何も変更がなかった場合は、キャッシュされたファイルが返されます。

Sass(SCSS)

• Sass – Syntactically Awesome Stylesheets (公式)
• Sass – チュートリアル (公式の翻訳)
• Sass、そしてSassy CSS (SCSS)
• hamashun.me : Windows PC に Ruby と Sass を導入する方法
• Sass でもう一度 CSS を楽しく! – terkel.jp
• SassでCSSの弱点を克服しよう － ＠IT
• CSSの構造化にSassを利用してみる（1） — qui-no Labs

LESS

• LESS « The Dynamic Stylesheet language (公式)
• LESSを使ってすっきりCSSを記述してみる｜linker journal｜linker
• LESS: CSSをよりシンプルに、パワフルに | CSS Radar | For Frond End Developers
• LessでCSSはもっと楽になる！（第1.5回Yokohama.js） | Mach3.laBlog
• Sassよりラクチン，LESS.appで簡単CSSコンパイル生活！（Mac限定） ::ハブろぐ