https://github.com/jaywcjlove/stylus-px2rem
Stylus convert px to rem in css files with optional fallback to px.
https://github.com/jaywcjlove/stylus-px2rem
css-files rems stylus stylus-px2rem
Last synced: about 2 months ago
JSON representation
Stylus convert px to rem in css files with optional fallback to px.
- Host: GitHub
- URL: https://github.com/jaywcjlove/stylus-px2rem
- Owner: jaywcjlove
- Created: 2016-04-10T08:24:23.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-12-17T02:44:28.000Z (over 1 year ago)
- Last Synced: 2025-04-12T23:26:32.218Z (2 months ago)
- Topics: css-files, rems, stylus, stylus-px2rem
- Language: Stylus
- Homepage: https://jaywcjlove.github.io/stylus-px2rem
- Size: 98.6 KB
- Stars: 45
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# stylus-px2rem
[](https://jaywcjlove.github.io/#/sponsor)
[](https://www.npmjs.com/package/stylus-px2rem)
[](http://stylus-lang.com/)
[](https://github.com/jaywcjlove/stylus-px2rem/actions/workflows/ci.yml)
stylus convert px to rem in css files with optional fallback to px.
# Getting Started
If you haven't used [Stylus](http://stylus-lang.com/) before, be sure to check out the [Getting Started](http://stylus-lang.com/try.html#) guide. Once you're familiar with [Stylus](http://stylus-lang.com/), you may install this plugin with this command:
```bash
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
```css
@import "stylus-px2rem"
div
margin 24px 24px
font-size 14px
padding-bottom 12px
width 100px
height 100%
```
Output
```css
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`.
```css
@import "stylus-px2rem"
div
margin 24px 24px
font-size 14px
padding-bottom 12px
width 100px
height 100%
```
Partial convert
```css
@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:
```js
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`.
```js
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
```css
@import 'stylus-px2rem'
.banner{
height 140px
font-size 24px
}
```
## With Plugin Use
```bash
stylus -u stylus-px2rem index.styl
```
index.styl
```css
@import "stylus-px2rem"
/* or Partial convert */
@import 'stylus-px2rem/mixins'
@import 'stylus-px2rem/font-size'
@import 'stylus-px2rem/border'
@import 'stylus-px2rem/margin'
```
```css
@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](https://github.com/jaywcjlove/github-action-contributors).
## License
MIT © [Kenny Wong](https://github.com/jaywcjlove)