Treeline on top of a snow covered hill

escss: Emacs structured CSS

% git clone http://perma-curious.eu/escss.git

This is for css what esxml is for xml.

It is inspired by LASS (Lisp Augmented Style Sheets in CL)

In escss a list is either a list of blocks or a block. The first element of a block is a selector and the rest are either properties or subblocks. Subblocks have their selectors merged with their parents and allow for less verbose nested css representation.

Grammar

list of blocks: (block ...)
         block: (selector [property | block] ...)
      selector: string | (and string ...) | (or string ...)
      property: :keyword arg ...
           arg: any printable Lisp object

Selector

A selector is just a css selector as string. Additionally you can define combinations of selectors:

(or selector ...) -- select any of the selectors
= , separated selector in css

(and selectors ...) -- select the combination of selectors
= SPACE separated selector in css

Example

This example shows how to use shared variables und nested blocks to output combined html and css. 

(let* ((max-width "60ch")
       (background "#f4f9ff")
       (foreground "#0c1120")
       (escss `(("@font-face"
                 :font-family "garamond"
                 :src "url(/EBGaramond12-Regular.woff2)")
                ("body"
                 :background ,background
                 :color ,foreground
                 :font-family "\"garamond\",serif")
                ("#preamble"
                 :text-align center
                 ((or "a" "a:visited")
                  :text-decoration none)
                 ("a:hover"
                  :text-decoration underline)))))
  (mapconcat
   #'pp-esxml-to-xml
   `((title nil "MY WEBSITE TITLE")
     (style nil ,(escss-to-css escss)))
   "\n"))

<title>MY WEBSITE TITLE</title>
<style>@font-face {
font-family: garamond;
src: url(/EBGaramond12-Regular.woff2)}
body {
background: #f4f9ff;
color: #0c1120;
font-family: "garamond",serif}
#preamble {
text-align: center}
#preamble a,
#preamble a:visited {
text-decoration: none}
#preamble a:hover {
text-decoration: underline}</style>

Happy hacking :)

Patches, ideas, whatever: perma-curious@posteo.de

If your message should be part of the public discussion please tell me.