stylus-px2rem
v1.0.15
Published
Stylus convert px to rem in css files with optional fallback to px.
Downloads
58
Readme
stylus-px2rem
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
1px
will be ignored for experience, you can override it with define your number namedpx2rem_ignore_limit
.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'
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
MIT © Kenny Wong