# coffee-stylesheets

> Transpiler similar to SASS/SCSS/LESS/Stylus, except its 100% CoffeeScript!

Latest version **0.0.5** (published 2013-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install coffee-stylesheets
pnpm add coffee-stylesheets
yarn add coffee-stylesheets
bun add coffee-stylesheets
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2013-01-10 |
| First published | 2012-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Mike Smullin |
| Maintainers | mikesmullin |
| Keywords | coffee, css3, stylesheets, template, engine, browser, nodejs |

## Links

- npm: https://www.npmjs.com/package/coffee-stylesheets
- Repository: https://github.com/mikesmullin/coffee-stylesheets
- npm.io page: https://npm.io/package/coffee-stylesheets

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2013-01-10
- 0.0.4 — 2013-01-06
- 0.0.3 — 2013-01-02
- 0.0.2 — 2012-12-29
- 0.0.1 — 2012-12-22

## README

# CoffeeStylesheets

## What if you could write CoffeeScript like:

```coffeescript
body ->
  background 'black'
  color 'red'
  p ->
    font_size '12px'
    border_radius px 5
```

and get back a CSS3 stylesheet, like:

```css
body {
  background: black;
  color: red;
}
body p {
  font-size: 12px;
  -moz-border-radius: 5px; /* Firefox */
  -webkit-border-radius: 5px; /* Safari, Chrome */
  border-radius: 5px; /* CSS3 */
}
```

## Now, you can!

Just wrap it in this:

```coffeescript
engine = new CoffeeStylesheets
 format: true # optional
 globals: # optional
   px: (i) -> i + 'px' # a silly example of custom helpers
   # the cross-browser version of border_radius() is provided by the CoffeeStylesheetsCompassFramework plugin 
engine.render stylesheet, (err, css) ->
  console.log css
```

## Why this monstrosity?

* stand-alone; NO dependencies
* eliminates double-trees server/client-side in terms of both a) templating engines, and b) template files
* yet to be benchmarked, but likely 90% faster compilation than tokenizers (stylus, less, sass)
* only one language to write; one language to teach/master; one language to rule them all!
* common functions provided by js libs available and executed in same scope as stylesheet e.g., require()
* helps eliminate intermediary steps between the initial precompilation syntax sugar and the end result

## FAQ

 * **Do I have to use CoffeeScript?**
 While composing in CoffeeScript is obviously the point, you could store the compiled javascript version of the
template, and after that no coffee-script dependency is required. There is a pure javascript version of
the engine provided, as well.

 * **Does it only work in Node.js or client-side/in-browser as well?**
 It is designed to be used on either side. This is why it is lightweight, with no dependencies.

## See also

* Works well with [CoffeeTemplates](https://github.com/mikesmullin/coffee-templates) 
* Has a plugin called [CoffeeSprites](https://github.com/mikesmullin/coffee-sprites)
* Has a plugin called [CoffeeStylesheetsCompassFramework](https://github.com/mikesmullin/coffee-stylesheets-compass-framework)
* Thanks to Nino Paolo for beginning work on a [SASS to CoffeeStylesheets Converter](https://github.com/paolooo/coffee-espresso-two-shots)

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