メインコンテンツまでスキップ

PureScriptでCSS

· 約4分

PureScriptで型付けされたCSSを扱う​

せっかくPureScriptするんだったらCSSも型付けされたものを使いたいと思うのは自然ですよね。

安心してくださいPureScriptにはpurescript-cssというパッケージが既にあります。

今回はこのパッケージの使い方を紹介したいと思います。

これは何をするものなの？​

purescript-css はPureScriptの構文でCSSを構造化できて、それを文字列で出力してくれます。HTMLのsytleプロパティでCSSを指定したいときに便利です。

実際のPureScriptのコードは以下のようになります。

do
  width $ px 1.0
  height $ px 1.0

上記のコードは以下の文字列に変換されます。

"width: 1.0px; height: 1.0px"

インストール​

spago install purescript-css

使い方​

プロパティ​

全て確認したわけではありませんが、ほとんどCSSプロパティはPureScriptの関数で定義してあります。例えばwidthプロパティを作成するには以下のようにします。

import CSS.Geometry (width)
import CSS.Size (px)

width $ px 1.0

どのようなプロパティが定義されているかはPursuitを確認するのがよいでしょう。

複数のプロパティを構造化する​

通常CSSでwidthとheightを設定するときは以下のように書きますよね？

{
  width: 1px;
  height: 1px;
}

PureScriptでは上記を表現する方法はいくつかあるようです。

  1. doを使う

    たぶん一番オーソドックスなやり方だと思います。

    do
      width $ px 1.0
      height $ px 1.0

  2. (*>)を使う

    doが使えるのなら当然(*>)も使えますよね。

    (width $ px 1.0) *> (height $ px 1.0)

  3. (<>)を使う

    Semigroupのインスタンスが定義されているので(<>)も使えるようです。

    (width $ px 1.0) <> (height $ px 1.0)

文字列に変換する​

上記で生成されたプロパティはCSS型です。

この型を文字列Stringに変換するにはrender関数とrenderedInline関数を使います。rennder関数はCSSをInline形式とSheet形式に変換します。renderedInline関数はrennderされたものからInline形式のものを取り出します。

renderedInline $ render
   $ (width $ px 1.0)
   *> (height $ px 1.0)

これはMaybe Stringを返します。

HalogenでCSSを使う​

HalogenのHTMLもpurescript-cssに対応しています。purescript-halogen-cssのstyle関数はpurescript-cssのCSS型を受け取ってHalogenのIPropに変換してくれます。

import Halogen.HTML.CSS as CSS

HH.div [ CSS.style do
           width $ px 1.0
           height $ px 1.0 ]
       [ ... ]

これは便利ですねー！