`(sigil css)`

(sigil css) - S-expression CSS DSL

Write CSS using S-expressions for composability and theming. Properties are written as (property-name value) and nested selectors use &.

Basic Usage

(import (sigil css))

(css->string
  (css ".button"
    (background "#007bff")
    (padding "0.5rem 1rem")
    (border-radius "4px")))

Nested Selectors

Use & to create nested rules (like Sass/SCSS):

(css ".card"
  (padding "1rem")
  (& ":hover"
    (box-shadow "0 2px 8px rgba(0,0,0,0.3)"))
  (& " .title"
    (font-weight "bold")))

CSS Variables

Define custom properties with css-vars:

(css->string
  (css-vars
    (--bg "#0a0a0a")
    (--fg "#e0e0e0"))
  (css "body"
    (background "var(--bg)")
    (color "var(--fg)")))

Media Queries and Keyframes

(css-media "(max-width: 768px)"
  (css ".sidebar" (display "none")))

(css-keyframes "fade-in"
  (from (opacity "0"))
  (to (opacity "1")))

Exports

csssyntax

Main CSS rule constructor (macro version) (css ".selector" (color "red") (padding "1rem") (& ":hover" ...))

Properties are written as (property-name value ...) where property-name is NOT evaluated - it's captured literally by the macro.

Special forms: (& ":suffix" ...) - nested rule with parent selector + suffix (css ".child" ...) - nested child selector (becomes "parent .child")

css-varssyntax

Define CSS custom properties (variables).

Creates a :root block with the specified custom properties. Variable names should start with --.

(css-vars
  (--bg "#0a0a0a")
  (--fg "#e0e0e0")
  (--accent "#f0c040"))

css-mediaprocedure

Wrap CSS rules in a media query.

(css-media "(max-width: 768px)"
  (css ".sidebar" (display "none"))
  (css ".content" (width "100%")))

css-importprocedure

Create a CSS @import rule.

Useful for loading external fonts or stylesheets.

(css-import "https://fonts.googleapis.com/css2?family=Inter")
; => "@import url('https://...');"

css-rawprocedure

Insert raw CSS string.

For edge cases not covered by the DSL, like browser hacks or unusual syntax.

(css-raw "/* Legacy browser support */")

css-keyframessyntax

Define a CSS keyframes animation.

Each step is (step-name (prop value) ...) where step-name is typically from, to, or a percentage like 50%.

(css-keyframes "fade-in"
  (from (opacity "0"))
  (to (opacity "1")))

(css-keyframes "pulse"
  (from (transform "scale(1)"))
  (|50%| (transform "scale(1.1)"))
  (to (transform "scale(1)")))

css->stringprocedure

Convert CSS fragments to a string.

Accepts any number of CSS rules, variables, media queries, or keyframes and renders them to valid CSS.

(css->string
  (css-vars (--primary "#007bff"))
  (css ".button"
    (background "var(--primary)")
    (padding "1rem")))
; => ":root {\n  --primary: #007bff;\n}\n\n.button {\n  ..."

css-rule->stringprocedure

Render single rule (for debugging)

make-themeprocedure

Create a theme from key-value pairs.

Returns an alist that can be used with theme-ref and theme->css-vars.

(define dark-theme
  (make-theme
    '(bg "#0a0a0a")
    '(fg "#e0e0e0")
    '(accent "#f0c040")))

theme-refprocedure

Get a value from a theme by key.

Returns #f if the key is not found.

(theme-ref dark-theme 'bg)  ; => "#0a0a0a"

theme-varprocedure

Reference a theme key as a CSS variable.

(theme-var 'bg)  ; => "var(--bg)"

theme->css-varsprocedure

Convert a theme to CSS custom properties.

(theme->css-vars dark-theme)
; Creates :root { --bg: #0a0a0a; --fg: #e0e0e0; ... }

propprocedure

Explicit property constructor (rarely needed).

Most properties are defined directly in css rules, but this can be useful for dynamic property generation.

importantprocedure

Add !important to a value.

(css ".override" (color (important "red")))
; => .override { color: red !important; }

pxprocedure

Unit helpers for common CSS units.

(px 16)   ; => "16px"
(em 1.5)  ; => "1.5em"
(rem 2)   ; => "2rem"
(% 50)    ; => "50%"

rgbprocedure

Color helpers for CSS color functions.

(rgb 255 128 0)      ; => "rgb(255, 128, 0)"
(rgba 0 0 0 0.5)     ; => "rgba(0, 0, 0, 0.5)"
(hsl 200 50 60)      ; => "hsl(200, 50%, 60%)"

css-combineprocedure

Combine multiple CSS fragments into a list.

Useful for organizing CSS into logical groups that can be passed to css->string together.

(define button-styles
  (css-combine
    (css ".btn" (padding "0.5rem"))
    (css ".btn-primary" (background "blue"))))

(css->string button-styles)