https://github.com/lasso-js/lasso-stylus
Plugins for Lasso.js to support rendering Stylus files to CSS
https://github.com/lasso-js/lasso-stylus
Last synced: 4 months ago
JSON representation
Plugins for Lasso.js to support rendering Stylus files to CSS
- Host: GitHub
- URL: https://github.com/lasso-js/lasso-stylus
- Owner: lasso-js
- Created: 2014-09-07T20:03:50.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2017-12-19T14:43:35.000Z (almost 8 years ago)
- Last Synced: 2025-07-01T05:02:18.546Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 22.5 KB
- Stars: 2
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
lasso-stylus
=======================
This plugin for Lasso.js provides support for rendering [Stylus](http://learnboost.github.io/stylus/) dependencies to CSS.
# Installation
First install the plugin:
```bash
npm install lasso-stylus --save
```
Then, enable the plugin when configuring Lasso.js:
```javascript
require('lasso').configure({
plugins: [
{
module: 'lasso-stylus',
config: {
... // See Configuration below
}
}
]
});
```
# Usage
Once this plugin has been enabled, you can then add Stylus dependencies to your `browser.json` files. The file extension for Stylus files is expected to be `.styl`. Example:
__browser.json:__
```json
{
"dependencies": [
"style.styl"
]
}
```
# Configuration
The configuration for the `lasso-stylus` plugin supports the following properties:
* __defines:__ An array of functions to make available to Stylus files (see [Stylus API » define](https://github.com/LearnBoost/stylus/blob/master/docs/js.md#definename-node))
* __imports:__ An array of paths to Stylus files that should be globally imported to every Stylus file (see [Stylus API » import](https://github.com/LearnBoost/stylus/blob/master/docs/js.md#importpath))
* __includes:__ An array of directory paths to add to the search path (see [Stylus API » include](https://github.com/LearnBoost/stylus/blob/master/docs/js.md#includepath))
* __set:__ An object containing key/value settings for the Stylus renderer (see [Stylus API » set](https://github.com/LearnBoost/stylus/blob/master/docs/js.md#setsetting-value))
* __use:__ An array of library functions for Stylus (see [Stylus API » use](https://github.com/LearnBoost/stylus/blob/master/docs/js.md#usefn))
Example configuration:
```javascript
require('lasso').configure({
plugins: [
{
module: 'lasso-stylus',
config: {
includes: [nodePath.join(__dirname, 'stylus/mixins/')],
use: function(stylus) {
stylus.define('add', function(a, b) {
a = parseFloat(a);
b = parseFloat(b);
return a+b;
});
},
define: {
sub: function(a, b) {
a = parseFloat(a);
b = parseFloat(b);
return a-b;
}
},
imports: [
nodePath.join(__dirname, 'stylus/variables.styl')
]
}
}
]
});
```