yingye / Postcss Px2units
Licence: mit
A plugin for that generates rpx units from pixel units, it also can generate units which you want.
Stars: ✭ 62
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Postcss Px2units
Postcss Position
PostCSS plugin that adds shorthand declarations for position attributes
Stars: ✭ 26 (-58.06%)
Mutual labels: postcss-plugin
Nideadmin
【未完成】NideAdmin - 基于 Vue.js + Egg.js 的微信小程序后台框架
Stars: ✭ 35 (-43.55%)
Mutual labels: wechat-mini-program
Postcss Triangle
PostCSS plugin to create a triangle.
Stars: ✭ 57 (-8.06%)
Mutual labels: postcss-plugin
Postcss Banner
PostCSS plugin to add text banner and footer to resulting file
Stars: ✭ 13 (-79.03%)
Mutual labels: postcss-plugin
Anka Tracker
Miniprogram user behavior tracking library. Supports task queues, automatically suspended and retry strategies.
Stars: ✭ 29 (-53.23%)
Mutual labels: wechat-mini-program
Postcss Import
PostCSS plugin to inline @import rules content
Stars: ✭ 1,048 (+1590.32%)
Mutual labels: postcss-plugin
Mpvue Animated Number
微信小程序 mpvue 数字更新滚动动画组件 / An animated number component for mpvue
Stars: ✭ 33 (-46.77%)
Mutual labels: wechat-mini-program
Weixin Minigame Tutorial
Flappy Bird adaptation on Wechat Minigame using PhaserJS + English Wechat Minigames Tutorial
Stars: ✭ 56 (-9.68%)
Mutual labels: wechat-mini-program
Postcss Register Custom Props
PostCSS plugin that transforms custom property registration in CSS to JS
Stars: ✭ 20 (-67.74%)
Mutual labels: postcss-plugin
Taro
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
Stars: ✭ 30,230 (+48658.06%)
Mutual labels: wechat-mini-program
Steamcn Mini Program
SteamCN Forum WeChat Mini Program. SteamCN 蒸汽动力论坛微信小程序
Stars: ✭ 54 (-12.9%)
Mutual labels: wechat-mini-program
Postcss Interpolate
PostCSS plugin for values interpolation between breakpoints.
Stars: ✭ 9 (-85.48%)
Mutual labels: postcss-plugin
Postcss Nested Props
PostCSS plugin to unwrap nested properties.
Stars: ✭ 58 (-6.45%)
Mutual labels: postcss-plugin
Taro scaffold
基于 Taro / dva / redux-saga / react 的微信小程序脚手架,同时集成了 sprite 。
Stars: ✭ 24 (-61.29%)
Mutual labels: wechat-mini-program
Postcss Alias
PostCSS plugin that allows you to create aliases for CSS properties
Stars: ✭ 47 (-24.19%)
Mutual labels: postcss-plugin
Antmove
小程序转换器,基于支付宝/微信小程序, 轻松地转换成其它平台的小程序。
Stars: ✭ 1,078 (+1638.71%)
Mutual labels: wechat-mini-program
English | 简体中文
postcss-px2units
A plugin for PostCSS that generates rpx units from pixel units, it also can generate units which you want.
Install
$ npm install postcss-px2units --save-dev
Usage
Input/Output
With the default settings, we will get this output.
/* input */
p {
margin: 0 0 20px;
font-size: 32px;
line-height: 1.2;
letter-spacing: 1px; /* no */
}
/* output */
p {
margin: 0 0 20rpx;
font-size: 32rpx;
line-height: 1.2;
letter-spacing: 1px;
}
Example
var fs = require('fs');
var postcss = require('postcss');
var pxtorem = require('postcss-pxtorem');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
replace: false
};
var processedCss = postcss(pxtorem(options)).process(css).css;
fs.writeFile('main-rem.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('Rem file written.');
});
options
Type: Object | Null
Default:
{
divisor: 1,
multiple: 1,
decimalPlaces: 2,
comment: 'no',
targetUnits: 'rpx'
}
Detail:
- divisor(Number): divisor, replace pixel value with pixel / divisor.
- multiple(Number): multiple, replace pixel value with pixel * multiple.
- decimalPlaces(Number): the number of decimal places. For example, the css code is
width: 100px
, we will get the vaule isNumber(100 / divisor * multiple).toFixed(decimalPlaces)
. - comment(String): default value is 'no'. For example, if you set it 'not replace', the css code
width: 100px; /* not replace */
will be translated towidth: 100px;
- targetUnits(String): The units will replace pixel units, you can set it 'rem'.
Use with gulp-postcss
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits = require('postcss-pxtounits');
gulp.task('css', function () {
return gulp.src('./test/src/css/**/*.css')
.pipe(postcss([pxtounits()]))
.pipe(gulp.dest('./test/dist/css'));
});
Tips
If you want to use it in WePY, please use wepy-plugin-px2units.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].