hexo-renderer-stylus
Stylus renderer plugin for Hexo
Last updated 3 months ago by curben .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install hexo-renderer-stylus 
SYNC missed versions from official npm registry.

hexo-renderer-stylus

Build Status NPM version Coverage Status

Add support for Stylus with nib and other plugins.

Install

Prerequisites:

  • Hexo 3: >= 0.2
  • Hexo 2: 0.1.x
$ npm install hexo-renderer-stylus --save

Options

You can configure this plugin in _config.yml.

stylus:
  compress: false
  sourcemaps:
    comment: true
    inline: true
    sourceRoot: ''
    basePath: .
  plugins: 'nib'
  • compress - Compress generated CSS (default: false)
  • sourcemaps
    • comment - Adds a comment with the sourceMappingURL to the generated CSS (default: true)
    • inline - Inlines the sourcemap with full source text in base64 format (default: false)
    • sourceRoot - sourceRoot property of the generated sourcemap
    • basePath - Base path from which sourcemap and all sources are relative (default: .)
  • plugins - Stylus plugin(s) (default: nib)

Setting Stylus variables

It is possible to set variables that can be used in Stylus. The purpose of setting variable is to avoid direct modification of the Sylus code, and thus to make themes more generic

For example, instead of hardcoding:

div
 color #FFCC44

You can refer to a variable:

div
 color convert(hexo-config("moody_red"))

And in your theme's configuration, you can define this variable:

moody_red: "#8B0001"

(The "convert" function above is here to convert the string into an actual stylus color)

You can also use the theme_config variable in the main _config.yml:

theme_config:
  moody_red: "#8B0001"

Extensibility

This plugin provide a filter stylus:renderer to allows you extend it. When there’s something you cannot do in Stylus, define it in JavaScript!

For example, to define some global variable:

hexo.extend.filter.register('stylus:renderer', function(style) {
  style
    // we may define a global variable by passing a `Node`
    .define('has-canvas', require('stylus').nodes.false);
    // stylus also casts JavaScript values to their Stylus equivalents when possible
    .define('families', ['Helvetica Neue', 'Helvetica', 'sans-serif'])
    // also allows you to provide a JavaScript-defined function to Stylus
    .define('get-list', function(){
      return ['foo', 'bar', 'baz'];
    });
})

Save the file in "scripts/" folder and run Hexo as usual.

Notice: for more JavaScript api, refer to stylus's documentation.

Current Tags

  • 2.0.1                                ...           latest (3 months ago)

13 Versions

  • 2.0.1                                ...           3 months ago
  • 2.0.0                                ...           3 months ago
  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 0.3.3                                ...           4 years ago
  • 0.3.1                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.3                                ...           6 years ago
  • 0.2.2                                ...           6 years ago
  • 0.2.1                                ...           6 years ago
  • 0.1.0                                ...           7 years ago
  • 0.0.2                                ...           7 years ago
  • 0.0.1                                ...           7 years ago
Downloads
Today 519
This Week 1,093
This Month 6,562
Last Day 305
Last Week 1,950
Last Month 6,256
Dependencies (2)
Dev Dependencies (7)

Copyright 2014 - 2017 © taobao.org |