YaCSS - Yet Another Smart*CSS 
YaCSSとは
YaCSSは以下のような構造化されたCSSを、通常のCSSに変換するためのプログラムです。
通常のCSSでは、以下のように同じ.pageを何度も書かなければなりません。
.page .title{ ... }
.page .navigation{ ... }
.page .entry{ ... }
しかし、YaCSSを使うと以下のように書けます。
.page{
.title{ ... }
.navigation{ ... }
.entry{ ... }
}
Smart*CSSとの違い
このプログラムは、名前の通り Smart*CSSをマネしたものです。 しかし、以下のような違いがあります。
- 動的にではなく、静的に変換する。そのため、サーバ側にPHPやmod_rewriteは不要
- 変数が使えない。cppなどと連携させることで同等のことが可能。詳しくは、 CSSサンプルで
- 現在(Sun Jul 11 15:41:19 2010)、ダウンロード可能(Smart*CSSは公開停止中)
動作環境
ビルド環境
ビルド時に以下の環境が必要になります。
使用しているライブラリはParsecだけなので、ソースを修正すればHugs等でも動くかもしれません。
実行環境
実行時にcpp(C Preprocessor)と併用すると、以下のことが可能になります。
- 変数の使用
- 他のファイルのインクルード
ダウンロード & インストール
バイナリ(Windows用)
以下のアーカイブを適当なディレクトリに解凍してください。
yacss-1.0.2-bin.zip(Sun Jul 11 15:41:19 2010)
ビルド(その他のOS用)
ビルドには GHCが必要です。
yacss-1.0.2-src.tar.bz2(Sun Jul 11 15:41:19 2010)
上記のファイルをダウンロードし、以下のようにすることでインストールできます。
$ tar xvjf yacss-X.Y.Z-src.tar.bz2 $ cd yacss-X.Y.Z/ $ ghc --make css $ (sudo) cp css /usr/local/bin
使用方法
foo.scssからbar.cssを作る場合は次のようにします。
$ css foo.scss > bar.css
変数などを使用するためにcppと併用する場合は、次のようにします。
$ cpp -P foo.scss | css > bar.css
CSSサンプル
変数の使用方法以外は、 Smart*CSSと同様です。
階層化
Before:
.page{
margin: 10px;
.title{
font-size:150%;
}
.entry{
border: 1px solid black;
}
}
After:
.page {
margin: 10px;
}
.page .title {
font-size: 150%;
}
.page .entry {
border: 1px solid black;
}
最も基本的な書き方です。入れ子構造を展開して、普通のCSSを出力します。
カンマ併記
Before:
.page{
pre,blockquote{
margin-left:10px;
}
}
/* 親要素もカンマで区切れます */
.header,.footer{
p{
text-align:right;
}
}
After:
.page pre {
margin-left: 10px;
}
.page blockquote {
margin-left: 10px;
}
.header p {
text-align: right;
}
.footer p {
text-align: right;
}
複数のセレクタをカンマで区切ると、それを展開します。 末端の場合でも展開してしまいます。
変数の使用
Before:
#define MainColor #333
body{
color: MainColor;
}
h1{
color: MainColor;
}
After:
body {
color: #333;
}
h1 {
color: #333;
}
Smart*CSSと最も違う部分です。 YaCSSは変数を自分では扱えないので、cppのマクロを利用します。 そのため、この機能を利用するには、以下のようにcppを通す必要があります。
$ cpp foo.scss | css > bar.css
更新履歴
- 2007/12/1 1.0.2公開。セレクタに「 」が使えないバグを修正。プロパティ値に「-」が使えないバグを修正
- 2007/11/13 1.0.1公開。プロパティ値に「'」と「"」が使えないバグを修正
- 2007/11/11 1.0.0公開
バグ
プロパティ末尾のセミコロン(;)を省略できません。 そのため次のような書き方は許されていません。
p{ margin:0 }
/* p{ margin:0; } と書く必要がある */
ライセンス
MIT Licenseに準じます。