JavaScriptベースのCSS preprocessorであるAbsurdJS を試してみる

JavaScriptやJSONでCSSを書ける、というよりもCSS Preprocessorに近い感じのJSライブラリ AbsurdJS を試してみた。

AbsurdJSはサーバー、クライアントの両方で使用できる。
ビルドツールとしてGrunt-absurdが提供されているのでこれを使って試してみる。

Gruntの設定する。以下のようにした。

最終的に１つのファイルにまとめるためにコンパイルが必要とのことなので、import.jsというファイルをmanifestにした。

インポートの順序はcssと同じく、overwriteされるので重要。

ノーマル

疑似要素

ネスト

ネスト記述もほかのpreprocessorと同じく利用可能

変数・関数

mixin

plugin

mixinににているけど、property - value のペアを定義

media-query

rawデータ

json、cssファイルのimpport

ほかのCSS preprocessorと遜色なく利用できそう。
まだ、複数の条件が合致するとそのままObjectが出力されたりするところもあるるみたいだけど、JavaScript(node)のみで使えるので、クライアント、サーバー両方で柔軟に使えるのでいいですね。

そういえば類似したものがBEMのページにあるみたい。