css - 使用 Clojure Hiccup 呈现样式信息的惯用方式

Question

我需要在打嗝中构建样式信息，以便将元素放置在变量“top”和“left”指示的位置。我的代码如下所示：

(html [:div {:style (str "top" top ";left" left)} "some text"])

这段代码非常难看。如果 hiccup 使用标准 CSS 样式规则自动呈现“样式”属性会更好......然后我可以编写以下内容：

(html [:div {:style {:top top :left left}} "一些文字"])

是否已经有一个图书馆可以做到这一点？或者，我需要推出自己的解决方案吗？

感谢 Clojurians 的任何指点！

Answer 1

你可以编写一个函数来做到这一点，它甚至会比地图少一点打字。例如：

(defn style [& info]
  {:style (.trim (apply str (map #(let [[kwd val] %]
                                   (str (name kwd) ":" val "; "))
                                (apply hash-map info))))})

这将允许你这样写......

(html [:div (style :top top :left left) "some text"])

函数的示例输出...

user=> (style :top 32 :left 14)
{:style "top: 32; left: 14;"}

Answer 2

那这个呢：

(defn style [s]
  (str/join ";" (map #(str (name %) ":" ((keyword %) s)) (keys s))))

(style {:padding     "20px"
        :background  "#e68a00"
        :color       "white"
        :font-size   "large"
        :font-weight "bold"})

Answer 3

对 Clojure 的了解不多，但是像 Enlive 这样的基于“转换”的方法听起来像是满足这些需求的解决方案 - https://github.com/cgrand/enlive