PostCSS plugin to add extra units for easy rem and phi based layouts
This plugin gives you the ability to easily generate rem
based layouts while being able to think in the easier to wrangle px
unit. Instead of dealing with post processor functions, variables or manual conversions just write:
width: 160px/rem;
...and your output will be:
width: 10rem;
This gives you full control over exactly which values get converted into rem
values, as sometimes px
units are specifically needed.
Note: If you prefer not to use the /
character in your units you can change your options to use any conversion character you choose.
Alternatively you can just use the px
unit alone and set the plugin to automatically convert all px
values to rem
.
Additionally, the unit phi
is introduced to make it easy to utilize the golden ratio in your designs. For example:
padding: 1phi;
margin: 2phi;
...will compile to:
padding: 1.618rem;
margin: 3.236rem;
You can also specify whether you want your phi
unit to compile to em
or rem
units:
padding: 1phi/rem;
margin: 2phi/em;
...will compile to:
padding: 1.618rem;
margin: 3.236em;
Options, including converting all px
values to rem
, can be set within your stylesheet via @rules
:
/* set to true to convert all px values to rem automatically */
@remphiunits convert-all-px false;
/* number of decimal places in rem values */
@remphiunits precision 3;
/* base font size rem values are calculated with */
@remphiunits base-font-size 16;
/* the character used for unit conversion, don't wrap in quotes, e.g. change / to -> */
@remphiunits conversion-character ->;
$ npm install postcss-rem-phi-units
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var units = require('postcss-rem-phi-units');
gulp.task('css', function () {
var processors = [
units
];
return gulp.src('./src/style.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./css'));
});
Note that postcss-rem-phi-units can work with Stylus, but it must be used via poststylus for example:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var stylus = require('gulp-stylus');
var poststylus = require('poststylus');
var units = require('postcss-rem-phi-units');
gulp.task('stylus', function () {
var processors = [
units
];
gulp.src('style.styl')
.pipe(stylus({
use: [
poststylus(processors)
]
}))
.pipe(gulp.dest('./'))
});
Type: Boolean
Default: false
Set to true to convert all px values to rem automatically.
Type: Number
Default: 3
Number of decimal places in rem values.
Type: Number
Default: 16
Base font size rem values are calculated with.
Default: /
the character used for unit conversion, don't wrap in quotes, e.g. change /
to ->