css - 重复的花园语法

Question

我发现自己在写这个

  [:.container2 {:display :grid
                 :grid-template-columns "repeat(10, 50px)"
                 :grid-template-rows "repeat(10, 50px)"}]

使用 garden 转换为 css。

"repeat(10, 50px)" 应该用花园的方式来写，而不是我写字符串吗？

Answer 1

您可能必须从命名空间中排除 clojure.core/repeat，但您可以使用 garden 的 defcssfn。

(require '[garden.core :refer [css]])
(require '[garden.def :refer [defcssfn]])

(defcssfn repeat)

(css [:.container2 {:display :grid 
                    :grid-template-columns (repeat 10 "50px") 
                    :grid-template-rows (repeat 10 "50px")}]) 

=>    ".container2 {  display: grid;
                      grid-template-columns: repeat(10, 50px);
                      grid-template-rows: repeat(10, 50px);\n}"

或

(def my-custom-repeat (repeat 10 "50px")

(css [:.container2 {:display :grid 
                    :grid-template-columns  my-custom-repeat
                    :grid-template-rows     my-custom-repeat}])

=>    ".container2 { display: grid;
                     grid-template-columns:  repeat(10, 50px);
                     grid-template-rows:     repeat(10, 50px); }"