Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork4
Stylus convert px to rem in css files with optional fallback to px.
jaywcjlove/stylus-px2rem
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
stylus convert px to rem in css files with optional fallback to px.
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:
npm install stylus-px2rem --save-dev
Once the plugin has been installed, it may be you can make your "Stylus" runxx.styl it outputCSS:
1pxwill 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
@import"stylus-px2rem"div margin 24px 24px font-size 14px padding-bottom 12px width 100px height 100%
Output
div{margin:1.5rem1.5rem;font-size:.875rem;padding-bottom:.75rem;width:6.25rem;height:6.25rem}
Full convert,html-font-size default10px, You Can set it up. This setting will not be convertedfont-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;divmargin 24px 24px font-size 14px padding-bottom 12px width 100px height 100%
You can includestylus-px2rem as a normal stylus plugin. Basic example below:
varstylus=require('stylus');varpx2rem=require('stylus-px2rem');stylus(css).use(px2rem()).render(function(err,output){console.log(output);});
WithGulp Usestylus-px2rem, Addpx2rem() inuse.
vargulp=require('gulp');vargutil=require('gulp-util');varstylus=require('gulp-stylus');varpx2rem=require('stylus-px2rem');varautoprefixer=require('gulp-autoprefixer');varbrowserslist=['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}
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'
As always, thanks to our amazing contributors!
Made withcontributors.
MIT ©Kenny Wong
About
Stylus convert px to rem in css files with optional fallback to px.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.