# 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](/computer/software/sph-lib.html)

# 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