@@ -0,0 +1,38 @@
1+---
2+title: Using Clay with Hakyll
3+author: Jasper Van der Jeugt
4+---
5+
6+[Clay](http://sebastiaanvisser.github.com/clay/) is a nice CSS preprocesser
7+written in Haskell. There are multiple options to use this together with Hakyll,
8+but in this short tutorial I focus on what I think is the best way.
9+
10+This method requires every Clay file to have a `main` function which just prints
11+the CSS. This would be an example of such a file:
12+
13+``` haskell
14+{-# LANGUAGE OverloadedStrings #-}
15+import Clay
16+import qualified Data.Text.Lazy.IO as T
17+
18+test :: Css
19+test = ...
20+
21+main :: IO ()
22+main = T.putStr $ render test
23+```
24+
25+Let's assume such a file is called `css/foo.hs`. In our compiled site, we want
26+to map this to `css/foo.css`. Hence, the route is a simple `setExtension`. For
27+compilation, we simply pass the Clay file through `runghc` with no options.
28+
29+```haskell
30+match "css/*.hs" $ do
31+ route $ setExtension "css"
32+ compile $ getResourceString >>= withItemBody (unixFilter "runghc" [])
33+```
34+
35+The major advantage of using this method (as opposed to importing the Clay files
36+in `site.hs`) is that now Hakyll will only recompile the Clay files when
37+necessary, and you don't have to manually recompile your `site.hs` each time you
38+want to tweak your CSS a little.