Garten generiert Inline-Stile in Reagenz der Hiccup

Question

In Reagenz kann man Inline-CSS-Stile wie folgt angeben:

[:div {:style {:border "1px solid red"}} "My Text"] 

Garten solche CSS-Eigenschaften, die mehrere Werte in einer Liste allgemeineren machen kann. Vektoren für Komma getrennte Listen und verschachtelte Vektoren (hier verwendete) für Listen Leerzeichen getrennt:

(require '[garden.core :refer [style]]) 

(style {:border [[:1px :solid :black]]}) 
;= "border: 1px solid red;" 

Wie können diese Dinge kombiniert werden? Das Reagenz scheint stur zu sein und nur Hash-Maps für das Attribut style zu akzeptieren. Das Akzeptieren eines Strings wäre auch hier eine Lösung.

Im Allgemeinen sind Inline-Stile auf lange Sicht keine gute Wahl. So könnte man das lösen, indem man eine Klasse an die div anfügt und indem man seinen Stil global durch Gärten spezifiziert css Funktion.

Klasse Beispiel:

[:div.myclass "My Text"] 

(css [:.myclass {:border [[:1px :solid :black]]}]) 
;= ".myclass {\n border: 1px solid black;\n}" 

Aber manchmal ist es gut, mit Inline-Styles zu beginnen, so: Gibt es eine Möglichkeit, ihm die Art und Weise zu tun, die oben beschrieben wird?

Answer 1

Die Hash-Map, die optional den Hiccup-Vektoren der Reagenzien zugeführt werden kann, ist im Grunde genommen eine Abstraktion über die HTML-Attribute des angegebenen HTML-Elements. (Wie sie im DOM dargestellt werden) Zusätzlich kann eine weitere Hash-Karte verschachtelt werden, wenn sie an das Schlüsselwort :style angehängt ist. Dies ist eine Abstraktion der Stileigenschaften des Elements. Was ist eine andere Sache als die oben genannte. Aus diesem Grund könnte man argumentieren, dass diese beiden Dinge besser auseinandergehalten worden wären, wie auch immer es auf eine andere Art und Weise einfacher ist.

Wenn Sie die Stileigenschaften eines Elements ändern, indem Sie dessen Stilattribut festlegen, bedeutet dies, dass die gesamte Stilzeichenfolge analysiert werden muss, wenn nur ein Teil geändert wird. Es würde also nicht viel helfen, eine Extra-Option zu haben, um eine Stil-Zeichenfolge in Schluckauf zu liefern.

Es sieht aus wie Garten kann nur zu Strings rendern. Ich würde vorschlagen, es könnte hilfreich sein, wenn es auch zu einer Hash-Karte würde.

Hier ist jedoch ein Problem zu umgehen, die zusammen Reagenz und Gartenarbeit lässt:

(defn css-map [s] 
    (->> (style s) 
     (re-seq #"(.*): (.*);(?:\n|$)") 
     (reduce (fn [m [_ k v]] 
       (assoc m k v)) 
       {}))) 

(css-map {:border [[:1px :solid :red]] 
      :background-color (rgb 33 5 0)}) 
;= {"border" "1px solid red", "background-color" "#210500"} 

Die Leistung von diesem natürlich leiden. Wenn jemand eine bessere Lösung kennt, wäre ich immer noch neugierig.