Gulp下的手写笔:全局舍入所有小数
Stylus under Gulp: round up all decimal globally
我使用插件 npm gulp-stylus 来生成我的样式表。由于 Internet Explorer 不会低于 3 位小数(编辑 16/11/2015:2 位小数!)我会四舍五入我所有的数字 globally :
// => code output :
width: 83.33%;
使用 gulp-sass 我直接从 Gulpfile.js 文件中添加了一个选项,如下所示:
// Gulpfile.js (code for Sass)
return sass(source + '/Styles', {
style: 'compressed',
precision: 2 // it's here
})
但我不知道如何gulp-in Stylus 因为插件页面不是很明确...我只知道单独做:
.test
//width (100% / 12 * 10)
width floor(100% / 12 * 10, 2) // or round(), or ceil()... according to needs
gulp-stylus 中没有这样的设置。但是你可以为它使用 postcss 插件。
使用正则表达式模式处理浮点数 /(\d+?.\d{3,})(%|em|px)/gi
// Load the PostCSS module.
var postcss = require('postcss');
var post = require('gulp-postcss');
// Define the plugin.
var precision = postcss.plugin('postcss-precision', function() {
var longTest = /(\d+?\.\d{3,})(%|em|px)/gi;
return function(style) {
style.eachDecl(function(decl) {
if (! decl.value || longTest.test(decl.value)) {
// Grab array of matches.
var matches = longTest.exec(decl.value + '');
// We'll assume there's one.
var value = matches[1];
// Round two decimal places.
var rounded = Math.round(parseFloat(value) * 100) / 100;
// Change the value in the tree.
decl.value = decl.value.replace(value, rounded.toString());
}
});
};
});
// Make PostCSS aware of this plugin.
postcss().use(precision);
gulp.task('css', function() {
return gulp.src([
'src/**/*.css'
])
.pipe(post([precision()]))
.pipe(gulp.dest('build/css'));
});
gulp.task('default', ['css']);
我使用插件 npm gulp-stylus 来生成我的样式表。由于 Internet Explorer 不会低于 3 位小数(编辑 16/11/2015:2 位小数!)我会四舍五入我所有的数字 globally :
// => code output :
width: 83.33%;
使用 gulp-sass 我直接从 Gulpfile.js 文件中添加了一个选项,如下所示:
// Gulpfile.js (code for Sass)
return sass(source + '/Styles', {
style: 'compressed',
precision: 2 // it's here
})
但我不知道如何gulp-in Stylus 因为插件页面不是很明确...我只知道单独做:
.test
//width (100% / 12 * 10)
width floor(100% / 12 * 10, 2) // or round(), or ceil()... according to needs
gulp-stylus 中没有这样的设置。但是你可以为它使用 postcss 插件。 使用正则表达式模式处理浮点数 /(\d+?.\d{3,})(%|em|px)/gi
// Load the PostCSS module.
var postcss = require('postcss');
var post = require('gulp-postcss');
// Define the plugin.
var precision = postcss.plugin('postcss-precision', function() {
var longTest = /(\d+?\.\d{3,})(%|em|px)/gi;
return function(style) {
style.eachDecl(function(decl) {
if (! decl.value || longTest.test(decl.value)) {
// Grab array of matches.
var matches = longTest.exec(decl.value + '');
// We'll assume there's one.
var value = matches[1];
// Round two decimal places.
var rounded = Math.round(parseFloat(value) * 100) / 100;
// Change the value in the tree.
decl.value = decl.value.replace(value, rounded.toString());
}
});
};
});
// Make PostCSS aware of this plugin.
postcss().use(precision);
gulp.task('css', function() {
return gulp.src([
'src/**/*.css'
])
.pipe(post([precision()]))
.pipe(gulp.dest('build/css'));
});
gulp.task('default', ['css']);