Stylus Plugin

Introduction

The stylus plugin allows for generation of CSS from stylus input.

In addition to the core stylus features this lumbar plugin

Usage

The stylus plugin will compile any resources whose name ends with '.styl' defined on the styles object. It can be configured through a styles object located on the root lumbar configuration project.

Within the stylus pages themselves, the platform variables allow for conditional code like

body
  color $primaryBack if $web

Note that if multiple stylus files are defined for a given module they are all combined into a single stylus build. As a consequence the stylus variable state will be common across the module.

Configuration

Example

{
  "platforms": [ "iphone", "web" ],
  "modules": {
    "base": {
      "styles": [
        "styles/base.styl",
        {"src": "styles/iphone.styl", "platform": "iphone"},
        {"src": "styles/web.styl", "platform": "web"}
      ]
    }
  },

  "styles": {
    "pixelDensity": {
      "iphone": [ 1, 2 ]
    },
    "urlSizeLimit": 103,
    "copyFiles": true,
    "styleRoot": "static",
    "useNib": true,
    "includes": [
      "styles/global.styl"
    ]
  }
}
Fork me on GitHub