Flexible and fast modular CSS preprocessor built on top of Rework
JavaScript CSS Other
Clone or download
Latest commit b987d4b Feb 24, 2015
Failed to load latest commit information.
bin refactor options Jun 2, 2013
examples add browser support. Closes #6 Jun 2, 2013
test add delegation test. Closes #9 Jun 12, 2013
.gitignore add browser support. Closes #6 Jun 2, 2013
History.md Release 0.2.9 Feb 24, 2015
Makefile add browser support. Closes #6 Jun 2, 2013
Readme.md + build tool links Dec 18, 2013
component.json Release 0.2.9 Feb 24, 2015
index.js refactor options Jun 2, 2013
package.json Release 0.2.9 Feb 24, 2015
styl.js Release 0.2.4 Aug 22, 2013



Work-in-progress CSS preprocessor. Spiritual successor of Stylus. Built on top of Rework.

Styl is basically an opinionated configuration of Rework. It does not aim for feature parity with Stylus.

If your application benefits from a runtime (conditionals, loops etc.), then Stylus is for you. If your application benefits from incredibly fast builds, simplicity, and the most transparent CSS preprocessor around, then Styl is for you.

Building Styl on top of Rework drastically reduces complexity. That’s because Rework is comprised of multiple smaller pieces, plugins, and has no complex runtime. If you wish to include custom plugins, or configure Styl beyond its defaults, the interface is the same as Rework.


$ npm install -g styl

or with component:

$ component install component/styl

or with a script tag using ./styl.js


All Rework features and plugins are available out-of-the-box, including:

  • automatic vendor-prefixed properties
  • automatic vendor-prefixed values
  • automatic vendor-prefixed keyframes
  • additional easing functions
  • transparent support for retina hi-res images
  • rgba color helpers (rgba(#fc0, .5))
  • property reference support (height: @width)
  • several mixins
  • optional whitespace significant syntax
  • placeholder selectors
  • selector extensions
  • parent selector reference
  • nested selectors
  • command-line executable


Usage: styl [options]


  -h, --help            output usage information
  -V, --version         output the version number
  -v, --vendors <list>  vendor prefixes to apply [o,ms,moz,webkit]
  -w, --whitespace      use significant whitespace pre-processor
  -c, --compress        use output compression


CSS syntax

Regular CSS, with no vendor prefixing:

#logo {
  width: 50px;
  height: @width;
  absolute: top 100px left 50%;
  background: linear-gradient(top, black, white);

Compiled with the following command:

$ styl < simple.css > out.css


#logo {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 100px;
  left: 50%;
  background: -o-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -webkit-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white)

Whitespace significant syntax

The SASS-style (significant whitespace) syntax supports nesting and parent selector references. Currently, the CSS style does not; however this is likely to change in the future.

  margin: 0
    list-style: none
      display: block
      text-decoration: none
      padding: 5px 10px
        text-decoration: underline

Compiled with the following command:

$ styl -w < simple.styl > out.css


ul {
  margin: 0

ul li a:hover {
  text-decoration: underline

ul li a {
  display: block;
  text-decoration: none;
  padding: 5px 10px

ul li {
  list-style: none


Styl(string, options)

Initialize a new Styl with the given string of regular CSS or whitespace-significant style CSS with the following options:

  • whitespace enable css whitespace [false]
  • compress enable output compression [false]
var styl = require('styl');
var css = styl('body\n  color: blue', { whitespace: true }).toString();


Convert to CSS.


Projects built with Styl:

  • kube styl - styl implementation of the "kube" css framework

Build tools implementing Styl: