Skip to content
Stylus convert px to rem in css files with optional fallback to px.
Branch: master
Clone or download
Latest commit 7158f67 Jun 12, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Fix a value of 0 the error. Jun 12, 2017
test Add test cases. May 10, 2017
.editorconfig 添加 border-*, 统一风格(top, right, bottom, left) Dec 24, 2016
.gitignore add support of `px2rem_ignore_limit` Dec 8, 2016
.npmignore Add npm ignore. May 10, 2017
.travis.yml Add .travis.ym file. May 11, 2017
README.md Add the Build Status icon. May 11, 2017
index.styl Use support in gulp. Apr 13, 2016
package.json released v1.0.14 Jun 12, 2017

README.md

stylus-px2rem

Build Status

stylus convert px to rem in css files with optional fallback to px.

Getting Started

If you haven't used Stylus before, be sure to check out the Getting Started guide. Once you're familiar with Stylus, you may install this plugin with this command:

npm install stylus-px2rem --save-dev

Once the plugin has been installed, it may be you can make your "Stylus" run xx.styl it output CSS:

Note

  1. 1px will be ignored for experience, you can override it with define your number named px2rem_ignore_limit.

  2. If you want to preserve px value in some case(html element for example), use quote like font-size '16px'.

Input/Output

Input

@import "stylus-px2rem"
div 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%

Output

div{
    margin:1.5rem 1.5rem;
    font-size:.875rem;
    padding-bottom:.75rem;
    width:6.25rem;
    height:6.25rem
}

Example Usage

Full convert, html-font-size default 10px, You Can set it up. This setting will not be converted font-size 10px!important.

@import "stylus-px2rem"
div 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%

Partial convert

@import 'stylus-px2rem/mixins'
@import 'stylus-px2rem/font-size'
@import 'stylus-px2rem/border'
@import 'stylus-px2rem/top'
@import 'stylus-px2rem/left'
@import 'stylus-px2rem/right'
@import 'stylus-px2rem/bottom'
@import 'stylus-px2rem/margin'
@import 'stylus-px2rem/padding'
@import 'stylus-px2rem/width'
@import 'stylus-px2rem/height'
@import 'stylus-px2rem/min-height'
@import 'stylus-px2rem/max-height'
@import 'stylus-px2rem/min-width'
@import 'stylus-px2rem/max-width'
@import 'stylus-px2rem/line-height'
html-font-size = 10px;

div 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%

You can include stylus-px2rem as a normal stylus plugin. Basic example below:

var stylus = require('stylus');
var px2rem = require('stylus-px2rem');

stylus(css)
  .use(px2rem())
  .render(function(err, output){
    console.log(output);
  });

With Gulp Use

With Gulp Use stylus-px2rem, Add px2rem() in use.

var gulp = require('gulp');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var px2rem = require('stylus-px2rem');
var autoprefixer = require('gulp-autoprefixer');
var browserslist = ['Android 2.3', 'Android >= 4', 'Chrome >= 20', 'Firefox >= 24', 'Explorer >= 8', 'iOS >= 6', 'Opera >= 12', 'Safari >= 6'];


gulp.task('default', function() {
    gulp.src('./public/styl/*.styl')
        .pipe(stylus({
            use:[px2rem()],
            compress:true
        }))
        .pipe(autoprefixer({
            browsers: browserslist,
            cascade: false
        }).on('error',gutil.log))
        .pipe(gulp.dest('./public/css'));
});

index.styl

@import 'stylus-px2rem'
.banner{
    height 140px
    font-size 24px
}

With Plugin Use

stylus -u stylus-px2rem index.styl

index.styl

@import "stylus-px2rem"
/* or Partial convert */
@import 'stylus-px2rem/mixins'
@import 'stylus-px2rem/font-size'
@import 'stylus-px2rem/border'
@import 'stylus-px2rem/margin'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/mixins'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/font-size'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/border'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/margin'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/padding'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/width'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/height'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/line-height'
You can’t perform that action at this time.