# sexy-css

> JavaScript module that compiles Lisp-style s-expressions to CSS

Latest version **1.1.3** (published 2017-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install sexy-css
pnpm add sexy-css
yarn add sexy-css
bun add sexy-css
```

Provides the command `sexy`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2017-08-11 |
| First published | 2017-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dylan Baker |
| Maintainers | dylan.baker |

## Links

- npm: https://www.npmjs.com/package/sexy-css
- Repository: https://github.com/moleeternal/sexy
- Homepage: https://github.com/moleeternal/sexy#readme
- Issues: https://github.com/moleeternal/sexy/issues
- npm.io page: https://npm.io/package/sexy-css

## Recent versions

- 1.1.3 (latest) — 2017-08-11
- 1.1.2 — 2017-08-09
- 1.1.1 — 2017-08-04
- 1.1.0 — 2017-08-04
- 1.0.2 — 2017-08-04
- 1.0.1 — 2017-08-04
- 1.0.0 — 2017-08-04

## README

# sexy

JavaScript module that compiles Lisp-style s-expressions to CSS

## installation

`$ npm install sexy-css -g`

## usage

`$ sexy <path-to-file.sexy> > <output-file.css>`

## syntax

Example:

```
(.container :font-size 16px
            :color #0000FF
  (p :color #FF0000
    (span :text-decoration underline
          :border-bottom 1px solid #000000))
  (h1 :font-size 36px))
```

becomes (prettified)

```css
.container {
  font-size: 16px;
  color: #0000FF;
}

.container p {
  color: #FF0000;
}

.container p span {
  text-decoration: underline;
  border-bottom: 1px solid #000000;
}

.container h1 {
  font-size: 36px;
}
```

You can also use Sass-style variables:

```
(let ($red #FF0000
      $blue #0000FF
      $border 1px solid #000000
      $base-font-size 16px
      $heading-font-size 36px)
  (.container :font-size $base-font-size
              :color $blue
    (p :color $red
      (span :text-decoration underline
            :border-bottom $border))
    (h1 :font-size $heading-font-size)))
```

This produces the same output.

Be advised that more complex CSS features like media queries and keyframe
animations are not going to work.

---
_Source: https://npm.io/package/sexy-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._