CSSサンプル

ここでは、Smart*CSS独自のCSSである.scssファイルの記述方法のサンプルをご紹介します。Smart*CSSがインストールされた環境で、.scssファイルにBeforeのように記述すると、Afterのように変換されたCSSが表示されます。

階層化

#content {
    p {
        margin:1em;
        padding:0;
    }
 
    ul {
        list-style:none;
 
        li { padding:5px; }
    }
}

#content p {
    margin:1em;
    padding:0;
}
 
#content ul {
    list-style:none;
}
 
#content ul li {
    padding:5px;
}

Smart*CSSによる最も基本的な書式です。波括弧を入れ子にして階層構造を作ってやると、それに合わせたCSSを出力します。右のようなCSSを書くのは手間がかかりますが、Smart*CSSなら簡単です。ページ内をいくつかのdiv要素でブロック化してコーディングするような場合に特に有効です。波括弧とプロパティ定義は行を分けても、一行で書いても構いません。

カンマ併記

#header {
    p , table {
        margin:0;
    }
}

#header p {
    margin:0;
}
 
#header table {
    margin:0;
}

通常のCSSと同じように、複数のセレクタをカンマで区切って指定することができます。上のような親子構造を持たせた場合、それぞれの子要素に親のセレクタが適用されます。

カンマ併記2

#header , #footer {
    p {
        margin:0;
    }
}

#header p {
    margin:0;
}
 
#footer p {
    margin:0;
}

今度は逆に、親のセレクタをカンマ区切りで記述したパターンです。この場合、それぞれの親に対して子のセレクタが展開されます。上記の例では、「ヘッダとフッタのpにはマージンを適用しない」というケースを想定しています。

変数の使用

[assign var="img" value="../../images/"]

ul li {
    background:url('[$img]li_header.gif') no-repeat;
}

h1 {
    background:url('[$img]head_bg.gif');
}

ul li {
    background:url('../../images/li_header.gif') no-repeat;
}

h1 {
    background:url('../../images/head_bg.gif');
}

Smart*CSSはphpのテンプレートエンジンであるSmartyを使用しています。Smartyはいろいろな機能を持っており、Smart*CSSではその機能をそのまま利用できます。例えば、上記のように変数を利用して、同じ記述をまとめることが可能です。

他にも、よく使う属性の定義をまとめてしまうというのもありですね。「margin:0;padding:0;border:none;background:none;」みたいな定義を [$init] としてまとめる、なんてのも使えそうです。