Clojurians Log v2

Hi there, if I start out with something like

(ns some-file.css
  (:refer-clojure :exclude [> not])
  (:require
   [garden.selectors :as g :refer [& first-child > not ]]))

[:div.incomplete-actions {:margin-bottom "-1.5rem"}]

div.incomplete-actions {
  margin-bottom: -1.5rem;
}

div.incomplete-actions > div.incomplete-action:not(:last-child) {
  margin-bottom: 0;
}

(require '[garden.core :as css])
(require '[garden.selectors :as $])

(css/css
 [($/> ($/div :.incomplete-actions)
       ($/div :.incomplete-action ($/not $/last-child)))
  {:margin-bottom 0}])
;; =>
;; div.incomplete-actions > div.incomplete-action:not(:last-child) {
;;   margin-bottom: 0;
;; }

@rahx1t ☝️

That's very nice, thank you @noprompt! I was trying to use [:div... in combination with those. Would you say the selectors are more powerful?

I would say that they are for this kind of thing.

Because you can def that selector.

Great, thanks a ton!

(def $last-incomplete-action
  ($/> ($/div :.incomplete-actions)
       ($/div :.incomplete-action ($/not $/last-child))))

I haven’t used this in a while but I remember when I was doing a lot of CSS with Garden I did this sort of thing frequently and it gave me a ton of control.

Selectors are “sticky” too so you can then do something like.

(css/css
 [($last-incomplete-action $/hover)
  {:background "green"}])
;; =>
;; div.incomplete-actions > div.incomplete-action:not(:last-child):hover {
;;   background: green;
;; }

Basically, you can use them either as a value or a function. As a value they end up being rendered as is. If you invoke them they accept other selectors as arguments and glue them together and give you an instance of the same kind of value/function thing.

Cool, I will focus on learning these selector patterns a bit better. at first glance, they are a lot more intuitive than what I was trying to do

That's awesome. They seem very composable

Yeah. Its borderline abusive. 🙂

But I thought the idea was a lot of fun.

I tried to make them work like they do in CSS. You have operators like >, +, etc. that work with the prefix notation e.g. (+ s1 s2). The others simply concatenate.

Is there a way to achieve what I had asked above without using the $/div selector? I think it's the "stickiness" you mentioned that is the differentiating factor

@rahx1t I don’t think so but I can’t remember.