Deployment

Recipes

Stylus

Stylus is an efficient, dynamic and expressive CSS pre-processor. It supports both an indented and a more familiar CSS style syntax.

Why?

Harp has baked in the best-of-bread pre-compilers automatically. This means you don't need to think about which assets to download, minified CSS or un-baked stylus files. Everything just works.

Usage

Harp's Asset Pipeline is super easy to use. All the pre-compiling happens implicitly so there is nothing to setup. Just name your file with a .styl extension instead of .css and the Harp web server will see it as if it is an .css file.

Example

In our project we have a style.styl and a variables.styl file in our public/css directory, like so:

Managing Imports

If you are familiar with Sass, you will accustomed to naming your partials with a leading underscore. This is permitted with Stylus, but not required. Because of this, you must explicitly reference the leading underscore when using @import to bring in a partial. For example, if you have a partial called _example.styl, you must use import it using @import "_example". Simply saying@import "example"` will not work in Stylus.

Using Nib

Nib is a library of mixins and utilities for Stylus. The fastest way to add Nib to your Harp app is to clone the Nib Git repository: