Clojure Web Development勉強 - Garden(その1)最低限の設定でCSSをコンパイルしてみる
前回に続いてCSSの話。
Reagent/Hiccupを使ってHTML/DOMをedn形式で定義しているのだから、できればCSSも同じくednで定義したい!という末期症状な人間のために、gardenというライブラリが存在している。
Hiccupと同じように、Clojureのデータ構造であるVectorとMapでCSSを定義できる。最近は生のCSSで書くのではなく、より表現力の高いPreprocessorなどを使って記述するケースが増えているようだが、そのようなPreprocessorよりもさらに強力なClojureのデータ構造処理の機能や関数化・データ再利用がすべて使えるというのは一つの強みである。
個人的にはそういったまっとうな理由よりも「どうせだったら全部ednで書こう」という思いのほうがgarden導入の強い動機になっているが。
今回は最低限gardenを使うための設定について。
Project.clj
(defproject min-garden "0.0.1" :dependencies [[org.clojure/clojure "1.8.0"] [garden "1.3.2"]] :main min-garden.core)
今回はあくまでgardenデータの定義とコンパイルについてのみなので、ClojureScriptやそれに関係するライブラリはまったく使わない。ClojureそのものとGardenをdependenciesに入れて、コンパイルさせるためにmain関数のありかを指定している。
core.clj
今回は.cljsではなく.cljファイルを定義:
(ns min-garden.core (:require [garden.core :refer [css]])) (def style [:body {:font-size "16px"}]) (defn -main [] (css {:output-to "resources/public/css/main.css"} style))
garden.coreからcssマクロをreferしている。styleというのはただのデータ構造で、vectorに:bodyキーワードとmapが入っていて、mapに:bodyに対して適用するスタイルの宣言が入っている。
-mainには、styleデータに基づいたcssをresources/public/css/main.cssというファイルにコンパイルする、という指示が入っている。ちなみにファイル指定なしで(css style)
などとするとstyleデータをcssフォーマットに直した文字列が返される。
ディレクトリ構造とコンパイル指示
resources/public/cssというディレクトリが存在しないとエラーになるので、mkdirなどでディレクトリ構造をちゃんと整える必要がある。
. ├── project.clj ├── resources │ └── public │ └── css └── src └── min_garden └── core.clj
あとはシェルからlein runを実行:
$lein run Wrote: resources/public/css/main.css
-main関数が走り、resources/public/cssに以下のmain.cssファイルが作成される:
body { font-size: 16px; }
次回はこのコンパイルプロセスを自動化するlein-gardenの話。