stylus-px2rem

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

Getting Started

If you haven't usedStylus before, be sure to check out theGetting Started guide. Once you're familiar withStylus, you may install this plugin with this command:

npminstall stylus-px2rem --save-dev

Once the plugin has been installed, it may be you can make your "Stylus" runxx.styl it outputCSS:

Note

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

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

Input/Output

Input

@import"stylus-px2rem"div    margin24px24px    font-size14px    padding-bottom12px    width100px    height100%

Output

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

Example Usage

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

@import"stylus-px2rem"div    margin24px24px    font-size14px    padding-bottom12px    width100px    height100%

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    margin24px24px    font-size14px    padding-bottom12px    width100px    height100%

You can includestylus-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

WithGulp Usestylus-px2rem, Addpx2rem() inuse.

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{    height140px    font-size24px}

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'

Contributors

As always, thanks to our amazing contributors!

Made withcontributors.

License

MIT ©Kenny Wong