2023-02-27

plcss

s-expression language that compiles to css

  • similar to "lesscss" or "sass" but arguably more powerful
  • complete css3 support
  • the name is an abbreviation of "prefix-list-css"
  • an implementation in ~80 lines of scheme is part of sph-lib

features

plain strings on the toplevel

"* {
  box-sizing: border-box
}"

nesting

("div" (".test" color green) ("a" color yellow))

div .test{color:green;}div a{color:yellow;}

production

("div" ((".test" "a") color green)

div .test{color:green;}div a{color:green;}

concatenation

("div" (("&.test" "a") color green)

div.test{color:green;}div a{color:green;}

@ statements

("@media" ("a" color "orange"))

@media{a{color:orange;}}

with the "css" binding you can use all variables and procedures from the scheme environment

the variables always come from the scheme environment and are inserted into plcss exactly like quasiquote (it is quasiquote)

(define myvariable "1rem")
(css
  ("body" margin (unquote myvariable)))

body{margin:1rem;}

example usage

compiled to a port with "plcss->css"

(import (sph lang plcss))
(plcss->css
  (quote ((".content" width "3px")))
  (current-output-port))

with "css"

(define a "4px")
(display
  (css
    (".content" (".mtime" position absolute right 0 top 0 color "hsl(0,0%,67%)" text-align right)
      (".signature" border "1px solid hsl(0,0%,70%)"
        display "inline-block" border-radius (unquote a) padding "0.75rem" color "hsl(0,0%,10%)"))
    (".middle .content" padding 0)))

result: .content .mtime{position:absolute;right:0;top:0;color:hsl(0,0%,67%);text-align:right;}.content .signature{border:1px solid hsl(0,0%,70%);display:inline-block;border-radius:4px;padding:0.75rem;color:hsl(0,0%,10%);}.middle .content{padding:0;}

syntax

  • all expressions use scheme syntax
  • properties always come before nested expressions
  • plcss: string/rule ...
  • rule: (selector/@-keyword property/value ... rule ...)
  • selector: string/(string ...)
  • property: symbol/string
  • value: any

filename suffix

.plcss