2018-06-30

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 is part of sph-lib

implemented as a guile r6rs library

written in ~90 lines of scheme

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

library description

can also be used inline with other scheme code.

syntax

  css-style :: properties-key/value ...

  for css properties without selectors. use case: inline-styles in xml attributes

import name

(sph lang plcss)

exports

css

syntax

signature

rules ...

css-style

syntax

signature

properties ...

plcss->css

procedure

signature

exprs port ->

(rule ...) port ->

plcss->css-string

procedure

signature

exprs ->

(rule ...) -> string

plcss-element-style->css-string

procedure

signature

a ->

sph-lang-plcss-description

variable

tags: programming guile documentation library scheme sph-lib start q1 specification computer css highlight sph-lang-plcss plcss functional